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vie est un éternel recommencement, mais faut bien débuter un jour ou'autre. 
Surtout en web design, un univers en perpétuelle évolution qui ait le mil des 
professionnels qui crouent sous les demandes des clients, mais également des 
néophytes qui s'intéressent à La question, et dont, sans doute, vous faites partie, 
Puisque vous tenez ce numéro entre les mains. lenvenue, 1 vous accompagn 
dans vos débuts et progressions, Après avor Lu notre dossier au es tendances du 

web, découvrez les aricies et les tutoriels qui vous apprendnt à créer de 

Fnteractiité à soigner es feuilles de style, valoriser votre ie web, à vous 

perfectionner, pus à tester, rélérencer et publier votre site, œuvre de bien 
des alors. Évitez les projets trop compliqués, jouez La carte de La sobriété, soyez le plus 
ample possible. Que vous souhaitez créer un site ou smélorer l'existant, nous avons 
rassemblé ici un matimum d'astuces qu vous permettront d'implémenter facilement les 
dernières tendances pour que votre se reste à La page eau goût du jour, Un magazine qui 
Sinscrt dans La kgnée du premier numére toujours en vente victime de son succès, surnotre 
rite marchand ww oracom fr. Bonne lecture et bon démarrage sur La Toile. 


Larédaction 


Sommaire 


8 Quoi de neuf ? 
TENDANCES DU WEB 
12 Rencontre 
FLORIAN JAMOIS UN JEUNE 
GRAPHISTE/WEBDESIGNER 
PASSIONNI 
14 Rencontre 
NICOLAS SCHIFF NOUS DÉVOILE 
SON PARCOURS DE WEBDESIGNER 
16 Dossier 
WEBDESIGN EN 2013. 
DÉCOUVREZ LES SIX TENDANCES !i 
CRÉER DE 
L'INTERACTIVITÉ 
32initiation 
LES PRINCIPAUX FORMATS D'IMAGES 
34 Initiation 
DÉFINIR LA NAVIGATION 
AVEC LES LIENS HYPERTEXTES 
36 Tutoriel 
CRÉER DES LIENS VERS UNE ANCRE, 
UNE PAGE, UN SITE OU UNE IMAGE 
58 Initiation 76 Tutoriel 
381initiation DÉCOUVRIR LES PRINCIPALES INTÉGRER LES RÉSEAUX DANS UN SITE 
INSÉRER DES LIENS SUR UNE IMAGE PROPRIÉTÉS DU CSS 80 initiation 
62 Tutoriel VALORISER UN SITE WEB GRACE AUX 
CRÉER DE L'INTERACTION CRÉERLE LIEN ENTRE LES FICHIERS RÉSEAUX SOC 
AVEC VOS FORMULAIRES DE STYLE ET LES PAGES HTML 84 Tutoriel 
Æ3hhiatien pe prete APPUQUERLOCALEMENT UNSTYLE 
DÉFINIR LES CHAMPS DE FORMULAIRE DÉFINIR UN STYLE CSSS 88 Tutoriel aise 
44 Tutoriel 64 Initiation 
. DANONE ETEXTERRES M TERNES SE PERFECTIONNER 
niaten 94 Initiation 
QUALITÉ DU CODE HTML ET Es Li. OS XHTML XHTML 2 HTMLS, 52 ET 
SÉMANTIQUE DES PAGES WEB. DE STYLES EXTERNE CSS3 : OÙ EN SOMMES-NOUS ? 
48 Tutoriel 96 Tutoriel 
CRETE VA LORISERIVOTRE) CRÉER UN PLAYER VIDÉO ET UNE 
LA MISE EN PAGE SITE WEB PLAYLIST AVEC HTMLS ET JQUERY 
EI 54 1nitiation 1007 
ÉUEN ane [ 
À L'INTÉGRATION 104 Tutoriel 
54 Initiation ñ RÉALISER UNE GRILLE POUR LE 
SXNOTIONS CSS AIDE Faton nes. RESPONSIVE 
À L'INTÉGRATION DIOUEREE AMIQUR 106 Tutoriel 
56 Tutoriel CRÉER VOTRE MENU AVEC PAGESLIDE 
GÉRER LA FORME AVEC LES CSS 


A] 


TESTER + PUBLIER + RESSOURCES 
(RÉFÉRENCER. 130 es OUTILS POUR DÉBUTER 


112 initiation 134 
TESTER VOTRE SITE SUR DIFFÉRENTS ENT 
NAVIGATEURS 138 Les sauises css2/css3 
114 Tutoriel 142 vintos er LIVRES 
METTRE EN LIGNE SOUS WORDPRESS 
re 144 uexique 
118 Initiation 
CHOISIRET UTILISERUN CUENTFTP 146 Sur le CD 
120 Tutoriel DES VIDÉOS, DES EXTRAITS DE LIVRES, 
CONFIGURER UN LOGICIEL FTP. LES FICHIERS D'EXERCICE, 20 PHOTOS 
. FOTOLIA OFFERTES 
122 Initiation 
QU'EST-CE QUE LE RÉFÉRENCEMENT 


SOCIAL ? 


Certains articles rassemblés. 
dans ce volume sont parus. 
dans le livre Réussir son site 


ler plus loin en 
avec HTMLS et CSS. AI F 


css 


Nos experts 


Maissoum Aboudrare 
abdesiner et graphiste relance 
depuis 2010 Maisoum est 

un pers qui accompagne 

2 cents de À à Z dans leur 


Aurélien Aries 
PDéeloppeuront-end ele 
basé à Paris, Aurélen déelogne en 
HTMLS/CSS3 et Query des sites 
Internet pour des nt ect ou 
des agences web 


Domitien Asselin 
de Williencourt 
Déreloppant des sites web depuis 
ÈS de x ans, Domitin Assis 
de Willncourt est aurai 
autoentrepreneur at étudiant à à 
WebSchoolactoy, spé en 


Didier Beeckman 
Diplômé de inst supérieur 
industriel égsos Gngtneur 
Industrie et du Catrs/tchatutur 
Crogrammation Internet et 
aciellement sdmnsrteuc, 
développeur et chef de projts nu 
sin dune entreprise de mebdesin. 
bebe. 

wa bhene 


Lilian Bourgevin 
Freelance autodidacte de 34 ans 
tant à Draguignan, passionné par 

Photoahog et le web, Lan a euvert 
san proge studio dépendant à 
enr roi ans. avale ave de 
rade entreprises des ttes 


Alexandre Crenn 
{Colondateur et Li designers de 

sance Chan étudiant à 20 ans 
Webschalhctay, Alesandre est 
un passionné de design numérique. 
a alrandrecrenncom 


Julien Debove 
Na à peine arslorsqu publ son 
premier ae Intemet Apres es dues 
He a déveoppement de commerce 
enigne site Par comme 
cclnce Mcbdesner Webmaster 
Zespertsdesigncom. 


Vincent De Oliveira 
Passianoé de CSS, Vincent 

ét wmcas3creste con. che 
déc à 'spérimentation et à 
apprentissage de CSS3 ainsi que 
Faut press com 
permettant l'ajout mtomatique des 
prés proprtares CSS 


Antoine Duchamp 
Cclondateur et évsnpeur ont 
end de agence Chan ce étudiant 
de 19 ans. à Viebachootactoy est 
ussphotoraphe de mode/portrait 
et phetorepoter rédacteur 

oateur dire ebdeugn Gale, 


Marc Fanelli-sla 
Autun use es. 
ardt codant rs es 
tte ms Qt pour tre 
th s3 mue te Sci Med. 
Ah L MAG pou et dé, 
Mar Far ete rés des 
magaones Le Lardimagasne com 
de entgrue de coms 
Mscatrardngeon 


Alexandre Faure 
aka Aleks Faure 
Atäicte en webdesign sn 
un DUT SRE Carice trésu 
de cememcston), As Faure 1e 
ét camera récét UN 

et esgrer» Frein au eve de 
sata. ds prncpalement Adobe 
Phone et tar re à 
raie no du vectoriel 


Florian Jamois 
Ce rune Graphste/Vebdesgner de 
23 ana, évolue depuis pus de ais 
ans che Srtec” une ace de 
commantation globale dans ouest 
Crest posé et autodidacte. 
accorde une grande mportance à 
Lerponome 


Jérémy Husser 
Wedesier che Ava ure 
agence ruméique stop 
Pasineé par e-commerce tend 

à 1 pt aiaer durs ce dome 

en tres tu les pes de 
Meg Cest teurs un pa 
pau li de partager ss connaissances 


“Thibaut Hofer 
Graphiste joumaliste (Adranced 
Crestin, WebDesign,Créarum. 
Palse ARTS) et auteur. Net en 
faveur de l'intégration es logiciels 
Hires et open Source dns un 
voniiou protemonnel légalement 
publi des œurages chez Dunod et 
es vidéos chez Elephorm 


Stephan Lemineur 
Webdesiener dans dérents studios 
et entreprises belges, rie 

le web occupe une grande pacs, 
Npartae ses compétences en tant 
ue formateur dors dverses écoles 
Bees 


Nicolas Schiff 
Tisdaire d'un DUT en Series et 
Réseau de Communication, Ncos 
SCHIF à continué son cursus 


nertie en cence pr TAIS 
Techniques et Acthvités de l'image 
a du Son) à IUT de Haguenau 
{Alsace). Ses rélsaions touchent 
ve le web. le pr et vidé. 


Nicolas Wallerand 
Dm dun BTS ormatiaue at 
és dans hat te series 
RS). poursuit actuollement ses 
études en vue obtient une lance 
olesuomale ATC Mutiméd 
Ateret Webmaster I) au le 
amer de Gao 

wanna ulinendt 


Karine Warbesson 
Graphiste. jouait, auteur et 
traductrice, ancienne élve de l'école 
des Gobelins (Pari), spécialsée 
ans La crétin de tes Web et pus 
articulirement avec des CMS 
ve WordPress Karine colabore 
avec de nombreux magazines parmi 
lesquels Mcbdeson Création Photo 
bien encore Débit Arts. 


Brice Zossi 
Chef de projet ee responsable 
Technique spécialisé notamment 
ane ramemok Spmfony le: 
sin d'une agence web de Metz 
depuis plus de os ans 


SITEBUILDER 


CRÉATION DE SITES WEB 


EZ VOTRE SITE PRO EN 5 MIN 
Plus besoin d'être webmaster ou graphiste pour créer un site web élégant et 


professionnel. Avec le nouveau service de Netissime vous pouvez créer un site 
perso, pro où même e-commerce en quelques clics et seulement en 4 étapes ! 


CRI 


Un service tout en 1 : Fonctionnant aussi bien sur Windows ou Mac, vous n'avez 
rien à télécharger rien à Installer et aucune connaissance technique n'est 
nécessaire. Le service de création de site en ligne SiteBuilder est accessible avec 
n'importe quel navigateur et de nimporte où. 


Iestinclus dans les offres hébergement professionnel vous bénéficiez d'un 
pack complet: adresses, e-malls, hébergement et système de création de site. 
Le service SiteBullder permet de créer un site perso, un site professionnel, un 
site de ventes en ligne, un blog, album photo en ligne, un forum 
Des fonctions exclusives : page Facebook, vidéo, blog, boutique. 


Inclus dans nos packs hébergement à partir 9t/me 


ES 


VOTRE SITE EN 4 ET 
1/ Choisissez votre catégorie d'activités : boutique, plombier, hôtel, restaurant, 
garage, services 

Renselgnez vos coordonnées : nom, société, adresse, e-mail 

3/ Votre site est prêt avec contenu, Images, et mise en page adaptée à votre 
activité et modifiable à tout moment 

4/ Publiez votre site d'un simple clic. 


Avantages Sitebuilder :Une interface Web conviviale. Un assistant qui vous guide 
à chaque étape, de l'ébauche du style et de la structure du site Web jusqu'à la 
publication du site, en passant par l'édition du contenu et le paramétrage du site. 


Une architecture ouverte. Vous pouvez créer 
ou modifier les templates (design), les menus, 
l'architecture des pages. 


Un module pour les statistiques Web 
entièrement intégré. Le module Statisti 

ques Web vous permet de faire des statis 
tiques poussées sur le trafic et sur les pages 
visitées de votre site web. 


te www.netissime.com 
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UN SERVICE QUASI UNIQUE ? 


ee marché du référencement se parte bien, mais son application à La 
phère mobile est très faible alors même que le nombre des applications, 
mobiles explose. Jessy Gross et Guillaume Sicard (SUP'In 


promotion 2014) ont créé un service quasi unix 
d'applications mobiles, 

qu'ils dévoileront 
bientôt sur le si 

Vizapp en plus d'une 
documentation 
conséquente sur le 
sujet. Jessy est un 
étudiant qui a remporté 
le concours Open 

du Web deux ans de 
suite dans la catégorie 
Référencement. 


le référence 


créatio 
ont sans doute agrandir le réseau dans les prochaines années. http.//numerique 


meilleurs projets des écoles de création 


La chaîne vient donc de lancer un portail 
numérique : Numérique Tendance. 
nt déjà re) 


la plateforme, d'autres 


onneur aux hommes, gloire aux 
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Jamais sans ma tablette 
jeunes. En France, la tablette 


FH tactile séduit plus les hommes 


que les femmes, et les jeunes plus que 
les seniors, révèle une étude IPSOS 
commandée par l'opérateur Prixtel. 
Les 16-34 ans l'utilisent principalement 
x sociaux alors que les 
lisent majoritairement 
utes sortes de recherches 
type cinéma, spectacles, etc, Les 
webdesigners l'auront bien compris 
savoir faire des sites responsive 
webdesign n'est plus une option 
mais une impérieuse nécessité. 
http://max.adobe.com/ 
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Tendances du web 


Florian Jamois, 
un jeune graphiste/webdesigner 
passionné 


Interview : Nicolas Schiff nous 
dévoile son parcours de webdesigner 


Webdesign en 2013. 
Découvrez les six tendances ! 


Rencontre 


strateo 


Florian Jamois 


Rencontre avec un jeune graphiste/webdesigner passionné. 


AuelLe est votre formation ? 


design 


tes vous frecance ou salarié? 


en autodidacte pendant un an gr 
Mme aujourd'hui je pr 

de me former et de ri 
expérimentations Dans notre 


l'aime importer les codes 

A Jeu pour ne pes être dé graphiques du print pour les 

uel mére tie vous ? y intégrer dans le web, je trouve : 
Made rspnuoe qu'ils se complètent bien. rurionomois roues enalnes (ornateurs 


un iMac de 215 pou 
un écran supplémentaire. En plus smartphones tablettes.) 
du clavier j'utilise une tablette graphique 


Quand auey-vous commencé à vous 


trouve éresser au webdesign et pourquoi ? 

tablette beaucoup lus précise et rapide 

uels Logiciels utiliseg-vous is donc orienté 

Le plus et pourquoi? fin de mes études. 

Sans surprise, julie l'incontoumable els sont vos rot en cours À venir? 

Cretive Suite de chez Adobe. J'aime La Jesus Faites-vous uniquement du design 
art qu'ffrenties li le des ou aussi de La programmation ? 


eux. Jai tout de même une préférence pour beauc 
Photoshop que 'utlse quotidiennement 


Étant graphiste pt deformation, eme 
suis dans un pr 
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Saint-Joseph-Lorraine, 
{72).ILa beaucoup oppris 
en outodidocte grâce 
à des res et à des 
formations sur internet. 
‘Créobf et possionné. 

il accorde une grande 
Importance à l'ergonomie 
et oux moindres 
détlls sur chacune 

de ses moquettes. 
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Florian Jamois 


de pouvoir 
ppliquer la même rigueur du début À a lin de 
ni La global du dossier, 

ment. Aujourd'hui je 

vise ainsi les langages HTMLS et CSS3, et 


sde quelques connaissances en Query et PHP. 
Pour finir ai de bonnes sure CMS 


(Où puiseg-vous vos idées, votre inspiration ? 


attentif à l'environnement qui m'entoure, Je Lis 


Ter et sur Internet en 2 
de favoris assez 4 


des graphiques du print pour es intégrer 


le web. Je trouve qu'ils se complètent bien 


Quels sont vos coups de cœur du moment ? 
En ce moment. irait devant 
ai de sus du ral 
mé LK, pres ou encore Grems. Leurs 
leurs typographie me issent 
réveur. En matière de webdesign j'me beaucoup 
aise ançaise Colorz, ou l'agence 
gsise Human. Elles savent parfaitement 
Alhererponomie, design et technologies 


Rencontre 


Nicolas Schiff 


À 22 ans, Nicolas nous dévoile son parcours de webdesigner. 


Quelle est uotre formation ? 


Quand aue-vous commencé à vous 

intéresser au webdesign et pourquoi ? 
5 d'un Cours 

Office que je vise le 


niquement pour de 
sance et du détourage délémer 


Quels Logiciels utiliseg-vous 
Le plus et pourquoi ? 

utilise ls suite Adobe 

roiets Photoshop m 
graphique 
Dreamaver 
couplé à Zen Coding me fi 
temps précieur 


ant que l'intégration 


Nicolas Schiff 
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A1 ons, s'est dj 


spéciolisé dans sa 
passion: le webdesign 
etl'intégrotion web. 

Son principal object est 
de devenir polyvalent 
dons l'ensemble des 
composantes du 
multimédia, cest pourquoi 
$es réalisations touchent 
Plusieurs domaines 

aussi uoris que Le web, 

Le print et La uidéo. 
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Quels sont vos coups de cœur 
du moment ? 


Jemint 
Anin 


Dossier 


À 
Le UCSI; 4 
en 10E3 


Parle ne Met ilestbieneeleMe Soul st la communauté 
Antoine DuchampeMAlEMA TEL EMENEENt essayés 
TONPASS CIE ED à la ans Ce dossié APE IVENNENnENEpse sur les 


AN IANENEDIENEM REA 


ü début du Web, le langage CSS et un peu l'emblème le skeuomorphisme, un nom Cl s'agi dun 
les logiciels tels que Photoshop ne néologisme, ce mot eniste pas dans La langue française) très 
permettaient pas une très. grande … compliqué qui désigne un concept qui ne l'est pourtant pas 
marge de manœuvre pour ce qui tait tant que ça. C'est une tendance dans le design qui consiste 
du design des sites Intemet et des à créer des interfaces imitant le plus possible a réalité grâce 
interactions proposées par ceux à lutliation de textures et de détails. Par exemple, pour 
Apurd hu Photosh 


recréer La texture du eue, faudrait imiter son grain, ses 


amas très volé, coutures et out ce qui pourrai faire an sorte de représenter 
itale mais auplus proche, visuellement, 


réalité, Apple rend les choses évidentes Évidentes grâce 


le CSS3 etle HTML, complétés por JvaScrpt quipermettent du 
de 


de réaliser des prouesses visuelles en 


pertommanceset int 
les tendances € 


té. Cestang nt une très fr 


utilisation de textures, de dégradés, 


d'éléments au plus proche de 1 ie quotidienne, au point 
parois de proposer des visuels ressemblant à des photos. 
Microsoh et Google ont également été deux grands moteurs 
Sinfluence de ces dernières années, et marchent d'aleurs 
a plus sur les plates-bandes d'Apple et aur le 


bre 2011, Gone a uniformisé le 


design de se services en suivant l'exemple de Microsoft et de 
son design de Windows Phone 7 s'est ainsi intégré dans une 
tendance qui est annoncée comme La plus influents de cette 
année 2013: flat design. Contrairement auskeuomorphisme 
Apple, le Hat design, comme son nom l'indique, consiste à 
apltir les couleurs, que l'on cherche à rendre visuellement le 
Plus simplement possible pour obtenir queique chose d'épuré 
et de très souvent colaré, Microsoft en fi aujourd Ruï usage 
‘dans son interface Metro (Windows 8 et Windows Phone 8) 
et Google, comme dit précédemment, sur l'intégralité de ses 
services. 


LE FLAT DESIGN 
Microsoft a ausa tenté de frapper or et de bousculer toutes 
Les tendances du design, Pari réussi! Suivi de près par Google. 
Microsoft est en rain d'imposer son design comme la 
tendance n° de cette année 2012. Même les applications sur 
1OS sont touchées : Google Maps est revenu avec un design 
Arès plat et beaucoup mains exturé que l'ancienne version. 
Windows, avec son nouveau design, souhaite aussi urifier la 
bérarchisation du contenu de son interface. Contrairement 
au skeuomorphisme qui ne respectait pas de structure 
particulère, les interfaces Windows doivent respecter très 
trictement les guidelines déterminées par Microsoft. On 
assiste donc à un nouveau système et à un nouveau défi 
pour es designers : comment être original quand chacun doit 
suivre la même structure ? Même si Microsoft reste très strict 
sur là charte graphique d'une application (vos applications. 
sont vériides et valdées en amont par ses équipes avant 


de pouvoir apparaître sur le store), La firme de Redmond 
d'en reste pas moins attentive et à l'écoute de possibles 
améliorations, 

“Googe et Microsoft sont ainsi devenus deux incontournables 
références en matière de flat design en intégrant leur 
démarche dans une esthétique minimaliste : c'est simple, 
épuré. léger et cela faite La compréhension. Leurs sites 
étant énormément visités, sont rendu populaire [à nouveau) 
ce style. Les sites, Les que The Noun Project layervaul.com 
ou encore windowsofnewyork com sont de bons exemples de 
at design. 
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Le mobi en 2013 


eTe 


Ci-dessus et de gauche à droite le skeuomorphisme d'Apple, 
Le fat design de Windows Bet de Google 


Cdessous et de gauche à droite : les sites Layervautt 
et Thenounproect sont de bons exemples de 1 
at design. 
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Le it design dust 


Les su minimum afin de mar spists 


de couleur etes 
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« Le mebdesien on 2013 


La mode est aussi au parallane. Cette technique consiste 
à faire ehectuer des actions (transitions, animations, etc.) 
à le page en fonction du défilement ou de La position de 
La souris sur la page. Le parallare est une technique qui 
impressionne toujours les néophytes. Néanmoins, si l'on 
techniquement pas très compliqué à réaliser, du moins pour 
un efet basique. 1 faudra principalement le penser lors de 


| un moyen de rendre votre design plus dynamique, plus 


fun. l faut penser le design pour le parallaxe, et non le 
contra. Cette technique peut vous permettre de raconter 
une histoire, entrainer une interaction un peu plus poussée 
MY WARNER avec votre visiteur, un peu comme sur le site d'Evan Shalshow 
(http evanshalsham.com/bondcars/index. mi) 
où encore sur celui de Jules Bassolel (htp/rn. 
iulesbassoliL fe) 


Lepremier (Bond Carspar Evan Shalshaw)estunsiteretraçant 
histoire des votures de James Bond. Plus nous scrollons 


manière et avec de jolies transitions les anciennes. 
le site à ét développé par 
du portois d'un designer interacti 


voitures Pour Jules Bosslel (dr 


Pierre Rossignol, 
Quelques efets légers en parallane permettent de rendre 


son ste un peu plus dynamique, tels que le déploiement de 
es “leuilets” de réflexion sur l'ergonomie de ses projets 
fu encore l'apparition petit à petit du contenu de ses pages 


les principales tendances actuelles dans le webdesign 


Nous n'avons pas pu aborder toutes les tendances 2013 
du webdesign, qui sont diverses et variées, mais nous 
vous. avons présenté les principales afin qu'elles vous 


sprent et vous donnent envie d'en découvrir encore pus ! 


Sivous serollez dans Ia page du site d'Evan Shaliham, vous remonterez l'toire et décourriez les anciennes votures créées pour James Bond. 
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Six 
tendances 
fortes 


Tous les acteurs du milieu le disent : le web est 

une entité en perpétuel renouvellement. Les modes 
passent, les technologies changent, les habitudes 
des internautes également, mais le web a toujours 
su s'adapter, malgré de nombreux écueils, grâce 

au travail acharné et passionné des développeurs. 
Prévoir précisément ce que sera l'avenir des 
technologies web est un exercice périlleux tant 

les choses évoluent vite, mais il est toujours 
possible de définir une ligne directrice que je vous 
propose de suivre dans cet article. La tendance 
pour 2013 s'annonce particulièrement excitante : 
prise en charge de plus en plus large des nouvelles 
spécifications (HTMLS et CSS3), arrivée de la 

4G en France, généralisation des smartphones 

et tablettes... Ces perspectives ne doivent pourtant 
pas masquer les enjeux du web : l'accessibilité pour 
tous, la pertinence du contenu éditorial et sa mise 
en valeur, l'utilisation de technologies adaptées. 
Embarquons dans notre DeLorean flambant neuve 
et retournons-nous vers le futur ! Litian Sourgeuin 


WEBDESIGN : ASPECT GRAPHIQUE 


Le web dans son ensemble à subi d'importantes mutations 
ces demières années, et 2013 dewait suivre Is même 
dynamique. D'un paint de vue purement graphique, le style 
Aénéral des sites s'est grandement épuré, voire simplifié. Ce 
nouveau ste”, apparu déjà depuis un petit moment, s'est 
amplifié tout aulong de l'année écoulée, et gageons que 2013 
8 fera que conforter cette tendance. L'influence d'Apple, 
srefée dans TADN de la plupart des webdesigners et de plus 
en plus ancrée dans l'esprit du grand publi, y est peut-être 
pour beaucoup (grâce notamment aux pubictés pour les 


iPhone/Pad passant en boucle et au succès 
phénoménal de ces appareil). 

Mais a vraie raison de ce changement de style 
est la mode du response design qui a explosé en 
2012. Trouvant 53 source dans les ventes 
xtrémement importantes d'appareils mobiles et 
dans La multiplication des nouveaux périphériques 
de navigation qui en découle, celui-ci impose une 
grande capacité d'adaptation des interfaces des its. 
Afin avoir une bonne compatibilité dafhchage sur tous 
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supports et de conserve 
les smartphones 


des performances acceptables sur 
re utilisés dans des zones 


faible couverture rés 


u), La simplification graphique +’ 


imposée d'elle-même... La mode des sites adaptatis € 


Plus que jan 
dpurés verront leur envol en 2013. Autre facteur non 


négligeable de cette tendance: le coût de réalisation d'un site 
La crise économique étant passée par à, bon nombre de 
cents ont décidé de limiter leur budget et cherchent avant 
tout à toucher le plus de gens pos 

coûts de production Sion excepteles 


etles grandes entreprises qui peuvent se permet 


‘dans un site dédié aux ordinateurs de bureau et dans un autre 
spécifique aux smartphones (voire dans des ape ations) les 


cents plus modestes préféreront opter pour une solu 
out en un”, adaptable, quitte à of une expérience un 
moins excitante leurs visiteurs. Le responsive design restera 
dane un bon argument de vente en 2013 pour ariver à 
récupérer ces contrats de milieu de gamme, et renforcera 
d'autant plus l'engouement pour la création de sites 
minimalistes tiendra à vous de juger correctement de La 
pertinence de cate technologie en fonction des besoins de 
vos clients. L'aspect épuré et minimaliste des ses 
d'aujourd'hui étant à mon sens étroitement lé à ces trois 


aspects (ifluences/lfets de mode, sdaptabiité/cont 


mes. 
techniques et économie), paraît raisonnable de penser que 
La tendance est pas près de s'inverser pour 201. 


Le responsive design a été au centre de toutes es attentions 
en 2012. Après une phase 'engouement qi a vu fleuri bon 
nombre de sites response, La fin d'année 2012 a vu naître Les 


Plonger l'internaute dans son univers : un atout clef de 


Un design épuré pour plus de visibilité. 


BUREAU 


MUNK 


voeu ns ae 


GG a simplification 


graphique s'est imposée 
LL) d'elle-même... 
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premières grandes oppositions. Ainsi. le responsive design 
susclera sans doute toujours autant d'intérèt en 2013, mais 
son image de “messie du web risque fort d'être écomée. 
Défaut principal des sites adaptables: obligation pour les 
périphériques nomades de charger l'intégralité du contenu et 
des ressources, même celles qui ne seront pas utilisées où 
atfichées. Globalement, un le lourd en version de bureau le 
sera tout autant sur un smartphone. 1 sera donc beaucoup 
us lent à charger à cause du réseau utilisé (36, voire Edge), 
Pour ne proposer au final qu'une version ight à a navigation 
semi-optimisée”, diront les plus réfractaires. Même les plus 
fervents supporters de cate technologie devront admettre 
qu'il s'agit 1 d'un problème d'expérience utilisateur dune 
Hrande importance : à vouloir coriger un défaut, nous en 
avons créé un nouveau ! Faut-il pour autant abandonner les 
sites responsive en 2013 ? La réponse se veut plus uancée.… 
L'arivée en grande pompe de La 46 en France ne vous aura 
pas échappé en ce début d'année (grâce notamment aux 
spots télévisés de certains opérateurs. Même si cette 
annonce relève plus de l'argument de vente pur et simple à 
l'heure actuelle, la 46 arrive bel et ben et verra son rayon 
d'action augmenter au il de l'année, pour commencer à être 
franchement présente début 2014. y a donc fort à parier que 
Faugmentation importante du débit combler sans problème 
Les défauts de temps de chargement des sites responsive. 
Pour autant, les soucis d'optimisation de a bande passante 
seront quant à eux loin d'être résolus. En conséquence, 
pensez plus que jamais à optimiser au maximum tous vos 
fichiers utlisez La compression la minification de scripts etc. 
{Autre problère à résoudre en 2013 : les soucis de résolution 
Par rapport aux tailles d'écran {Pad 2 et Pad mini. qu ont 
ous les deux une résolution de 1024 x 768 pixels, en sont de 
bons exemples). Afcher plus de pixels sur des écrans plus 
petits est pas sans conséquence sur les. méthodes de 
détection de périphérique et sur l'adaptabiité de certains 
éléments eruciaur, comme La navigation. Vous pourrez très 
bien voux retrouver avec une media query censée s'active 
ours iPad 2 (en voulant détecter une largeur d'afichage de 
1024 pixels en mode landecape), mais sachez quelle sera 
aussi appliquée pour les IPad mini (même résolution, mais 
aussi écran plus petit de 4 à 5 cm D. Ces problèmes se feront 
de plus en plus nombreux au fur et à mesure que les 
constructeurs déclneront leurs produits dans de multiples 
formats et résolutions (on parle déjà d'un Pad mini avec 
écran Reina). Le responsive design sera donc en 2013 un 
choix ne pas prendre à a légère, et de nouvelles règles plus 
sûres pour la détection des zones d'affichage devront être 
définies afin de. s'affranchir des contraintes liées aux 
diérentes résolutions d'écran. 


LCSS3 ET HTMLS: 
INTERNET EXPLORER ENFIN À JOUR ! 

{CSS3 et HTMLS resteront plus que jamais le couple moteur 
duweben2OI3 Avec abandon (certains iront 'assassinat") 
grandissant de Flash au profit de ces deux technologies, si 
vous n'avez pas encore franchie pas en 2012 je ne peux que 
vous recommander de le faire en 2013. Si les nombreuses 
différences de prise en charge des navigateurs (internet 
Explorer en tête) ont pu vous freiner parle passé, sachez que 
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Su tendances forts 


2013 devrait être une année où cette barière s'estompera 
fortement, du mains pour les spécifications les plus 
couramment utilisées. L'arivée d'internet Enplorer 10 depuis. 
septembre 2012 et son portage sous Windows 7 nous. 
promettent de nous afranchir d'une parie des bidouilles et 
frustrations liées au développement web (notamment avec 
Les CSS3) : voir l'interface que nous avions si soigneusement 
préparée se faire maltrater par IE 9 et ses ancétres (IE 9. 
s'étant même pas capable d'afficher un text-chadow sans 
devoir passer par une solution propriétaire) devrait lire 
parte du passé au ur et à mesure que IE 10 s'imposera dans. 
Le paysage. Gageons que cete version du plus controversé 
des navigateurs permettra aux 30 % dintemautes qui 
Futlisent de découvrir enfin Le vrai visage du web, Posons 
toutefois un peut bémol sur cette vision optimiste: même si 
avancée considérable que représente IE 10 nous donne des 
raisons de nous réjouir, faut garder à 'sprt a lenteur avec 
lquelle Microsoft gère l'adoption des _ nouvelles 
spécifications La où tous les autres prockdent à des correctifs. 
réguiers et automatiques larme de Redmond à toujours été 
Plus lente à réagi Espérons que les développeurs GE ont tré 
Les enseignements des erreurs du passé et nous proposeront 


des mises à jour plus régulières, sans quoi nous pourrons. 
nous retrouver de nouveau ave de fortes disparités d'ici à La 
fin de année. 


GG L'arrivée d'Internet Explorer 10 

et son portage sous Windows 7 
LL] nous promettent de nous affranchir 
d'une partie des bidouilles et frustrations 
liées au développement web. 


La présentation interet Explorer 10 sur le site dédié 


Fast and fluid 
for Windows 7 
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RÉFÉRENCEMENT 2013 : 
PRIORITÉ AU CONTENU ET À L'EFFICACITÉ 

2012 à été une année extrmement mouvementée dans l'univers du 
référencement. La mise à jour de l'algorithme de Google a provoqué pas 
mal de bouleversements dans La hiérarchie du web et nombreux ont été les 
sites qui ont vu leur classement chuter, parlos de façon très importante. 
{Comme toujours, Goagle s'est montré quelque peu évasi sur les critères 
qui ont prédominé dans La définition du classement. 2013 verra à coup Sr 
d'autres modifications apportées à La pertinence des résultats. Comment 
faire dans les semaines à venir pour tenter de conserver son classement ? 
Le moyen plus sûr sera en premier ieu de donner La priorité àun contenu 
de qualité ainsi qu'à sa mise en valeur, destà-dire penser à agencer 
correctement le contemu avant même de réléchir mu contenant 
{présentation du contenu de façon claire et accessible en partant de 
Fafichage sur mobile, puis sur tablette, pour finir par le rendu sur les 
ordinateurs de bureau, ceci avant même de penser au design). L'utilisation 
de balises oppropriées et leur optimisation (non outrancière) vous. 
assureront de passer une année 2013 plus sereine lors des futures mises à 
Jour. Utilisez la balise rels"author” pour signer vos articles (surtout pour 


les blogs), segmentez judicieusement votre texte dans votre code source 
grâce aux nouvelles balises proposées par HTMLS(<section et article 
entre autres), utilisez les microdatas (ou mierolormats) et mettez votre 
code à jour le plus régulièrement possible. 

Trawollez également sur les temps de chargement de vos sites, Vous 
aurez ainsi le double avantage de plaire énormément à Google (Celui-ci 
dorant les sites légers), mais vous fcilterez également La navigation sur 


GG Respectez plus que jamais 
les consignes du moteur 
de recherche le plus 

influent au monde, et n'essayez 

pas d'être plus malin que lui. 


en 


smartphone avec des temps d'accès plus courts. Veillez aussi à passer du 
temps sur l'aceessblité : lutlisateur devra étre au centre de vos 
préoaupations. Google est décidé à traquer les spammeurs ls riches 
etles développeurs peu respectueux. Donc, un dernier conseil pour 2013 
respectez plus que jamais les consignes du moteur de recherche le plus 
influent au monde, et n'essayez pas d'être plus malin que li. 


RÉSEAUX SOCIAUX + 
FACEBOOK, TWITTER ET GOOGLE+ 

2013 sara aussi l'année où 1 vous faudra multiplier les passereles entre 
vos sites tles réseaux sociaux si ce est déjà ait, vous êtes sérieusement 
en retard). Facebook et Twitter bien sûr, mais aussi Google+ qu se 
positionne ( l'heure où sont éertes ces lignes) comme réseau social 
numéro 2 grâce à de plus en plus d'utilisateurs actifs dons le monde. Sur 
Facebook, le fit d'engranger le masimum de fans sur votre Fanpage ne 
sera plus suffisant pour assurer votre promotion. Une vraie stratégie de 
communietion era tre établie (avec un budget) afin de maintenir votre 
auditoire en alerte. Facebook conserve toujours une santé lrissante, mais. 
quelques nuages pourraient apparaitre à horizon lorsque le réseau des 


un peu pus s0n image. 

Tieeter est devenu une action de plus en plus populaire les chaînes de 
télévision ont bien compris avec l'explosion du nombre de tweets lors des, 
émissions de télé-crochet Proposez vous aussun masimurn d'interactivté 
vos ollowers, tenez-Les au courant de vos dernières news. Tuiter entre 
de plus en plus dans Les moeurs et son influence ne fera que s'accentuer, 
peut-être même sa popularité dépassers1-ll cell de Facebook Aire à 

Enfin, Goo sera à n'en pas douter un acteur important en 2013. Sa 
Popularité croissante face à un Facebook de plus en plus controversé en 
fait un choix important dans votre stratégie sociale. Bénéiciant 
d'une melleure image dans le publi, sctiité des membres y est pourtant 
mains importante que sur Facebook. Dificile de dire si 2013 inversera 
cette tendance. En embuscade, Google+ bénéicera certainement des 
problèmes d'image de Facebook. Affaire à suivre de près. 

Sion regarde attentivement l'année écoulée, 1 devient évident que les 
réseau sociaux jouent et vont jouer un rôle de plus en plus important. 


[14 Facebook conserve toujours une santé florissante, mais quelques 
nuages pourraient apparaître à l'horizon lorsque le réseau des 
réseaux implantera son moteur de recherche (Graph Search), 

quirisque de poser de nombreuses questions concernant la vie privée. 
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2013 verr probablement une forte augmentation du nombre 
de community managers et peut-être La reconnaissance de 
ce statut comme un poste d'importance. 


PÉRIPHÉRIQUES NOMADES 

ETNAVIGATION TACTILE 

‘Apple aindéniablement changé notre façon d'aborder le web 
grâce à la démocratisation de La nauigation tactile et à 
l'arrivée massive des smartphones. Concevoir un site sans 
mettre a navigation mobile au centre de vos préoccupations 
est devenu aussi impensable que d'espérer avoir un trafic 
important sans vous soucier du référencement : selon les 
dernières prévisions, plus de rois Français sur quatre seront 
en possession dun smartphone en 2013. Optimiser le 
comtenu de votre site pour les mobiles sera donc un enjeu 
crucial Le responsive design répond à cette attente, mais de 
façon partielle. Si vous souhaitez vraiment offrir une 
expérience parfaite aux visiteurs, vous faudra vous tourner 
versa création d'applications web ou de versions optimistes 
pour des périphériques spécifiques. Peut-être une nouvelle 


corde 3 ajouter à votre arc pour 2013. La navigation tactile 
offre des possibilités ariinales de se démarquer sur mobile 
où tablette. Créer un site one page à défilement vertical 
où horiontal permettra d'optimiser La navigation sur ces. 
devices et évitera l'utilisation de liens parois difiiles à 
activer sur les petits écrans, Tout comme les sites 
minimalistes abordés plus haut, ls sites one page devraient 
encore fleuri sur le web en 2013. 


POUR CONCLURE 
2013 sera à mon avis une année où peu de choses vont 
changer mais plutôt s'afrmer La plupart des nouveautés ne 
seront au final que des évolutions de systèmes déjà en place. 
Nous asssterons ainsi à l'mégration de plus en plus 
importante des réseaux sociaux, dans nos vies, à une 
omniprésence de plus en plus forte d'internet en raison de La 
multiplication des périphériques, à un afinement des 
méthodes de travail, qui vont aussi s'améliorer et à l'arrivée à 
maturité des navigateurs. 2013 ne sera pas une année de 
révolution mais d'évolution. à 


GG Tout comme les sites minimalistes abordés 
plus haut, les sites one page devraient 
LL] encore fleurir sur le web en 2013. 


Exemple de site One Page à défilement vertical. 


il fogaohe Rétro 
e =. ë 


La 


= 


julielittleconversation.fr 


Réalisée par Florian Jamois 


ulie Little Conversation est 
un blog léger où se mêlent 
insprations, décorations, coups 

‘de cœur de créateurs et jolies 
boutiquesädécouvrir. origine 

sur là plateforme Tumb, ce 

blog st désormais propulsé par 

WordPress afin de lui apporter 

un outil capable d'améliorer certaines de ses, 
fonctionnalités. Cette évolution à également 
permis d'offrir une certaine liberté graphique 


ainsi qu'une organisation sur mesure du 
contenu, correspondant aux besoins de ce blog. 
Après analyse. l'ergonomie à été repensée ain 
de permettre aux lecteurs d'avoir accès, d'un 
simple coup d'œil, aux informations relatives 
aux articles depuis l'accueil. Autre point fort, 
es trois derniers articles parus sont affichés 
de façon permanente en haut de chacune des 
pages pour permettre une interaction eficace 
entre les articles. 


Mod collective : la céramique colorée ! 
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Créer de l'interactivité 


les principaux 
formats d'images 


Définir la navigation 
avec les liens hypertextes 


Créer des liens vers 
une ancre, une page, 
un site ou une image 


Insérer des liens sur une image 


Créer de l'interaction 
avec vos formulaires 


Définir les champs 
de formulaire 
Créer un formulaire de contact 


Qualité du code HTML 
et sémantique des pages web 


Les principaux 
formats d'images 
Les formats d'images sont légion en 
informatique, mais seuls certains 

s'avèrent réellement utiles sur le 

web. Nous vous proposons d'y voir 

plus clair sur les principaux formats 


d'images utilisés dans la conception de 
sites Internet grâce à notre guide. 


epuis La création d'internet et sa démocratisation 

auprès du grand publi, de nombreux formats de 

fichiers dédiés à l'encodage et à l'affichage de 

données graphiques ont vu le jour, que ce soi. 

sousl'impulsiond'éditeurs ou de communautés 

de développeurs. Si La plupart existent encore 

aujourd ui, c'est notamment grâce à l'évolution 

des navigateurs Internet que certains ont peu à 

peu pris le pas sur leurs ancéres. Poids de fichier, 

qualité d'encodage et de compression, gestion de La transparence, prise 

en compte des métadonnées sont autant de Facteurs qui ont permis 

l'émergence et la standardisation de formats comme le PNG ou le JPEG, 

laissant peu à peu décliner les plus obsolètes comme le GIF ou le BMP. 

Nous allons dans ce guide vous expliquer les points forts et les points. 

faibles des principaux formats utilisés aujourd hui parles webdesigners 
tes développeurs. 


LE FORMAT BITMAP (BMP) 
Standardaé par les OS de Mirosoft et dévelepoé conjointe 
ce dernier et IBM dans les années B0 le format biimap apone un encodage 


reltiement imole. permet de stocker les ph 
Boites et se révèle capable de gérer une palette de Suest 
encore assez présent dans es systèmes d'exploitation actuel est à proncre 
dns la conception de sites Internet et même d'une mare générale 1 
supporte jusqu'à 16 lions de couleurs mas génère des fichiers Lo 

hr pas transparence, À éviter sauf pe 
“cher BMP dont suffit de modifie manuel 


LE FORMAT JPG (OU JPEG) 
IMis au point dans le courant des sanées 80 et stand 
des années 9 je format JPG est très souvent ts pour en 
es photos. SL offre un rapport quat/poids de Bed 
son algorithme de compression à tendance à 
des images et M 
1 demeure ès utile pour pr 
er pour publier une conception 
lustrtion ou dun design de site Intern 
des systèmes d'exploitation et navigateurs actuel 
EG 


support tautelis ps La transparence. Pusieus initie come ke 
aber Graphics ou encore Le PEG2000 li ont permis d'évoluer en 
ces contraintes, amélerant mér pee 


PNG 24bis 
1015x1600 pixels - 2 Mo 


RAW (sans compression) 
1015x1600 pixels - 20 Mo 


ET ET 


armee un standard dés pour fier des mages de grande til, 
rs La mesure du possible au profit du feat PNG: 


LE FORMAT GIF 


user, le format de eh GIF (Graphic 
a) à té conçu à a in des années 80 et se décline en deu 
7 et le GIF Ba. Le GIF 87 est capable de supporter une 
permettant anti de Bénérer des animations 
mie à un afchage de 256 couleurs dons une 
de muances, Son successeur. le GIF E9a, gère quant 


de de 168 mn 
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Les principaux format d'images 


PNG Bts GF JPG (compression à 90%) JPG (compression à 50%) 
1018x1600 pixels -720 Ko 1015x1600 pixsis-830Ko  1015x1600 pixels 690 Ko 1018x1600 pixels - 185 Ko 


DR hente 

au pro du format PNG, ota 
les éditeurs à payeruneredevat 
ce alorthme 


Créé dans le milieu des années 90, le foemat À 


LZWI du format GIF. Ce format gère leirelscement permet de 
mages en nor et blanc Gus 

colo) pouvant aller jusqu'à 48 bts par gel. I supporte 
de tansourer 


atilisé dans 
dent airsi 


Là pu un standard, et pas seulement dans le monde de a 
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Définir la 
avec des liens 


Un lien hypertexte est un mot ou une phrase 
qui permet de naviguer, par exemple vers 
une autre page web, une adresse mail ou 

un fichier à télécharger. Voici comment 

lier les pages les unes avec les autres. 


1 lien hypertexte est un mot ou une phrase 
qui permet, lorsque vous cliquez dessus, de 
naviguer, par exemple vers une autre page web, 
une adresse mail ou un fichier à 16 
etc. Chaque page possède une URL (Uniform 
Ressource Locator), également appelée adresse 
web, qui lui est propre et qui commence HTTP 
Hyper Text Transfert Protocol) sui du nom de 

domaine précédé de a mention uv (pour Word 

Wide Web), par exemple hitp:/ewworacom.com. Nous allons voir 

quels sont les principaux types de ie utilisés dans une page web. 


3 graphic suserg EP 
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xhtml 
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[14 Chaque page possède une URL 
(Uniform Ressource Locator), 
LL] également appelée adresse 
web, qui lui est propre et qui 
commence par HTTP (Hyper Text 
Transfert Protocol). narine warbesson 


LIENS VERS DES ADRESSES EXTERNES 


Reference: 
CRÉEZ ET OPTIMISEZ VOTRE PREMIER PDF 


Lattbut ref spécifie qua d'une esse. qu peut tre exteme ie 
Inteme) ouiteme envers un chier en ca sur Votre disque du). 

La txt spécifié entre les bases <a heat => et s/a> este tete afiché à 
Técran. 

{Un en est facilement reconnaissable puisque par défaut est de couleur beue 
et souligné. Remarquez également que lorsque vous passez votre souris sur Le 
ie, celui-ci appart dans la barre tte vor poneur se anslorme en ma. 


L'insertion dun en texte slletue avec La balise <a hrub placée dans Le 
corps de votre page. 


Par défaut. un en est de couleur bleue et souligné L'adresse apparait en bas à 
auche de La page lors du survol du en. 


LIENS À L'INTÉRIEUR D'UNE PAGE WEB 

Lorsqu'une page est porteulèrement longue 1 peut être utile d'insérer 
asieurs lens à l'intérieur de celle-ci, notamment pour créer une table des 
matières en haut de page par exemple Ces lens qui renvoient à iférens 
endroits d'une même page sont appelés des ancre. 

Conertement, vous devrez dl deux lens Le premier défini ls zone où 
doi ponts l'ancre CRÉEZ ET OPTIMISEZ VOTRE PREMIER PDF 


£a hrefe-#haut”> Lien vers Le haut de 1a page </e 
Ce en vous voie end où vous ex lack l'ancre # en mieu das page. 
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Déni a navistion avec des lens hypartertes 


LIEN VERS UNE ADRESSE E-MAIL 
Pracer un ben vers une adresse e-mal ouvre La messagerie de l'internaute avec 
adresse e-mail spécifiée. 1 s'agit dune technique rè simple permettant de 
recul étions et guests de La part de vos viseurs. 

Lttnbut rer de a baise est tiisé et radresse e-mail est précédée dela 
mention “mai 


re — 


{Un ch sur ce en ouvre automatiquement la messagerie par défaut de 
linternaute tell que Microsft Outlook, Gal, te. 


Lors dun ch sur un en e-mail messager par défaut de internaute s'ouvre 
aomatiquement. 


Pour spécifier ke sujet du message dan a fendtre du logiciel de messagerie qui 
safiche lorsque le vieur que sure en ulisez le code suivant 


<a href-rmalite rommtacthorsomÉrraubjecthBujet"»Contacec/e> 
La valeur de attribut subject détermine Le sujet du mai. 1 est spuré de 
adresse mad par un point 'exclomation. 

mise est le lxte ciquable qui entraînera ouverture de 1 fenêtre de 
choix de message. est recommandé de ne pas uiler d'espaces dans le 
este de sujet du message Ce sont en ele ps oujours bien prés. 
Si vous placez plusieurs lens vers votre e-mail sur OS Pas 8, VOUS VOUS y 
retrouverez pus facilement en spécifie sujet des messages, 

Vous pour ainsi créer des frs correspondant aux dférents thâmes dans 
voire logiciel de mai. e façon à classer es messages reçus selon leur sujet. 


Pièces automatiquement le sujet d'un e-mail est particulièrement pratique 
peur er vos messages. 
Karine Warbesson 


Bon destinataire 


Tutoriel 


Créer des liens vers une ancre, 
une page, un site ou une image 


Nous allons voir comment créer des liens 
dans une page HTML : un lien vers une ancre 
dans la même page, vers une autre 

rubrique de votre site, un lien extérieur, 

vers une image ou un fichier quelconque. 


ousallonsaborderdamscetutorell'umedesbases 
dutangage HTML, et donc de a création de sites. 
Internet: 1 création de liens hypertextes. QUI 
s'agisse d'une ancre pour 


lindreun paragraphe 
particulier au sein 'une même page, d'accéder à 
une autre rubrique de votre site Internet, de aire 
un lien vers le site d'un partenaire ou une source 
extérieure, ou même d'ouvrir automatiquement 
une Image ou un fichier tiers, La création de lens. 
aura bientôt. plus aucun secret pour vous. 


01 FT 


En langage HTML (HyperTeut Marup Language), on vise La balise pour 
créer des hens ver des éléments de aviation internes au externes au ue 


02 


Dans une page HTML peut se révéler is til de créer un en qui renvoie 
un paragraphe ou un mot précis de votre page. Mais vous pouvez 
également lise cette technique pour créer un sommaire ou un annuaire au 
sin d'une mème page HTML. Pour créer une ancre, faut out d'abord défis 
un enfant arc à attribut HTML a 32 


03 ER 


{Une oi vote identifiant din ne vous reste plus qu'à y associe unten 
commençant par le caractère & su du no de identifiant Le carsctère 
permet ini de se référer attribut id préalablement déni 


oabsres 


une page de votre site 


(De La même manière que précédemment, nous alors maintenant défi un 
Den pointant vers ue page de votre site Internet Pour cl nous ts Là 
même balise, mais en pointant cette fais vers une page HTML de votre site 


05 
en 


[06 Re 


Vous pouriez vou besoin de créer un in vers une image en haute définition 
de vo derires vacances das ls es sans pour autant vouloir afficher 
Arctement image dns votre page HTML Pour cela ous tons toujours 
Là même bal, mais nous allons tire pointer Le Len ves un fichier JPG 

en hate résolution 


[07 Hien vers un fichier 


55 vous souhaitez partager une archive complète de vos photos ou nimporte 
quel autre type de fichier compressé au format RAR où ZIP pr exemple, 


Quand vous créez un le vers une page dun sie extérieur, vous pourriez 
vor que La page en question ouvre dans un nouvel one Rien de pus 
Simole! Pour cel, sf ajouter Fattbut cargo" ak à votre lien 


D'autres valeurs de targrt sont possibles, en void un rapide descipti 
Syntame de base Desert 

Ouvre le he dans onglet actif (pr défaut) 
Ouvre le en dans La totalité de onglet ac 
Ouvre Le en dans Le cadre qui enveloppe onglet act 
Ouvre Le en dans un nouvel onglet du navigateur 


co Res 
er 
RES 
or pee 
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Maîtriser les styles CSS 


Dédié à la conception, 
sous tous les aspects du 
design, de l'ergonomie, 
de l'implémentation 
des fonctions, 

Web Design met en 
valeur les meilleures 
créations du moment 

et surtout propose des 

tutoriels pour réaliser 

soi-même les créations 
les plus avancées. 


En vente 
chez votre 
marchand 

de journaux 


$ 
ë 
è 
; 
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www.Shop.oracomr 
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LÉ RE) 1naeL + 
[Lee [rraciome | crésten L Enares (G. @i Bt: D FSC 9 me: /Doomensoren 1 
RHRCIVPE Demi PUBLIC ©//N3C//DID KM 1.0 Transitional EN 2 
MnEED+//sn 43 «089/TR/BERLL/DTD/HNtm1-Eran94ELONAL 460" 
Lanta tac hetpe//wv-N3.019/2999/xnmd"> 
<em> 
Femeca hesprequiverconcene-Type* concenemreext/neat; 
cnarseteues-8" /> 
<sitle>Docwmen sans nonc/citie> —— 
prier 
“asce 
1asc-svyie-amgeturi (Anage puce. 942) 


csv 


kil Se do np 


<nens> 


mheept//n.orncom.com>cINS SRO=eLOgO pag" />6/2> 


[as 
fe) 
nl 
a 
Lait un ler ur une Image lea bo arf ce vob age 


Insérer des liens sur une image 


L'image est primordiale pour illustrer 
votre page ou appuyer un commentai 
Voici comment créer des liens sur des 
images publiées dans un site web. 


limage est incontournable sur le web. El rend votre site plus 
conviialmaisaussioriginaletagréable ire Avant apprendre 
À créer des lens sur des images, est important de connaître 
les formats d'images supportés par le web, chacun ayant ses. 
spécificités : GIF, JPEG et PNG. Après avoir montré comment 
insérer une image dans une page web, nous détaillerons les 
diférents types de lens qui peuvent y être appliqués. 


INSERTION D'IMAGE DANS UNE PAGE WEB 
L'iertion d'image dans une page web salt à laide de baise com 
accompagnée de Tati ave (abréviation de source) et de Fat 
{abrite datematt 

Eng are» Lo BED RE" > 

et ne lise de pe rphsine (comme <>). Ce unie au est 
ps nécestae de Féctre en deu exemplaires come la gout des autres 
Balises En le, 1 gt simgiement ddr une image Sun endro rbi. 
Cet ble comporte eur art gares 

Permet inquer où se atue l'image  nsére. Vous pounez a cho 

sr un chemin absolu par enemgle M9 av te com image png 04 ons 
mt Le chemin ra. ce an Ile ps saut Aro ve moge [MSIE OE com.fr 
4 dans un sous doser images, ous devez par : ace nn En 
sua Prieial avantage de ctte méthode sun jour vus ma votre om Pace un ben vers une adresse €-madl sur une image st Le 1ecique ès 
ke domaine tue cu diet par exemple monte, vous ur Das couramment tie ar le 


VIGNETTE JPG 


GG Avant d'apprendre à créer 

des liens sur des images, 

il est important de connaître 
les formats d'images supportés 
par le web. xarine warbesson 


besoin de modlier manuallement le chemen de chacune de vo mages 
als, qu signifie “ent ateratl”. Correspond à un eau exte qu déc 
rlbvemant le contenu de mage. Ce texte ser afiché à La place de l'age 
1 cel-c ne peut ps être téléchargée mais aussi dns les navigateurs de 
personnes handicapées (non-vojats) 1 +at égement un atout non 
nétigetle en matière de référencement los de recherche d'image 


Tout comm est possible de placer un Ben sur du txt, un Lin peut être 
placé sur ne image. suffi encadre balise <img sue par les bases <a 
hr ra». Par exemple 

<a Houtsroatitorcootacehocncom fe ing ar n'anraléeSE /5) 
Dans cet exemple cest un ie vers une adresse e-mail qu a té placé Lo du 
survol de l'image par La souris, adresse mad lé apparait en bas à gauche 
dans page de votre nntgateur Un he sur lemeloppe permit de ice 
re messagerie par défaut afin demie drcctement un emo 

Len vers une adresse ed 

vous pouvez créer une image cube en plaçant dans 


heaps/Anarornccm.co esta page ver laquelle Le en va ponte 
= “hogo-prg este He de image qui sa cube 

Dans ct exemple, un cl sur l'image permettra d'accéder drectement a 5e 
ob défi dôs a section Ivel Cette technique est ès souvent utiisée pour 
Far un le sur le logo du ske web qu revoie généralement vers La page 
accueil du site. 


Initiation 


insérer des lions surune im 


GRANDE_TAILLE.JPG 


Aflcher une miniature dune image puis résser un ben vers une version en haute ésohtion s'nère particlèrement pratique. 


Autretechnique deien d'image rs ouventutlisée l'insertion dune miniature. 
Cette technique consste à nca une version petite tale de votre image da 
La page webs Lors du sur cele-c une version en haut résolution app 
à l'écran Particulièrement pratique lorsqul s'apt de créer un portfolio ou une 
gplerie images ou vers Large du ere 

Vous Grvez poser de deu versions de vtr photo, La vinete et son image 
oriine Après is vo placées dans le même dose, vous pour los 6 
Lacement lire un hen dela version miniature ver a version nai avec le 
code amant 


Karine Warbesson 


Tutoriel 


Votre nom 


INTÉRACTIVITÉ DES FORMULAIRES 


Votre e-mail 


Votr 


Créer de l'interaction 
avec vos formulaires 


Grâce à ce tutoriel, apprenez 
a créer de l'interaction dans vos 
formulaires, au survol des champs 
et des boutons, ou lorsque 

vous êtes en train d'écrire, 
uniquement avec CSS et CSS3 ! 


es formulaires sont de partout, aucun site n'y échappe. 
Parfois on trouve un seul champ de recherche et bien 
souventbeaucoupplus(formulaired'inscription/ contact. 
C'est pourquoi faut savoir captiver l'utilisateur, et faire en 
sorte que lors de son “voyage” à travers tous ces champs, 
I puisse apprécier son aventure, et rester concentré ! Dans 

ce tutoriel nous allons reproduire un formulaire de 
contact, avec les champs Nom, E-mail t Message. 
C'estpari! 


20 


101 per 


Pour commencer, nous devons ré tre espace de travail ot 
répertoire au nom de votre choix, par exemple “tuto Ensie, créez un 
Fer nd Ml et ss ess Dana ce dermier créer eur chers CSS, 
reset cs et mai ss Le premier contiendra ls règles de resl, si VOUS en 
avez déj ur, ie tenez pas compte. le eurième ser quand à Li cu 


tmp epestenne” aamermail" plaoeboldare once 
eau required À 
<hs> 
ai classer 
<nis 
ab 
A1 classes 


série nemmerastate” 2 
«ne 
<> 
date ctaaerebr>< ae 
<e 
Pour la présentation du tutorat quelques DIV et quelques ges. 
CSS rs légères je ne vous les exphicierai pas car vous en avez pa besoin 


Tutoriel 


Créer de Ninteration avec vos formulaires 


pour ce qui va suivre. Commençons par créer un <tor qui contiendra 
ue ste non-ordonnée et des input à limérieur Pourquoi une ste et pas 
directement ls input ? Une ste vous permeltra de maintenir vobe code 
bien pus simplement, et suriout acer des comportement/Atles CSS 


lus gobaiement. 


O2 Eee 


Pour La présentation du tutoriel ts quelques DIV et quelques règles 


‘érectemet les input ? Une te vous permettra de maintenir votre code 
Bien pus simplement. et surtout acer des compartement/Atles CSS 


input eyes" text” names tm” placehol der Votre 
se required 
<n® 
2 classes 
input eypoer ext” nanse-nalL placohal der Votre 


[03 ÊSS 


Le sie des champs éant assez conséquent. vous trouverez l'intégralité 
du code de ce tutoriel sure CD. 
(Coreme vous pouvez le vor ci-dessus Le Lrgeur des champs est tée 
100%. Car depuis quelques moments maintenant le response est non 
négigeabie, don ei aus pour un melleur maintient de vs style, est us 
intéressant de donner des valeurs fes au parents pour éviter de recopier 
des ges lors de 5 bretons. 

pitienseelaeives 

ptapiblocks 

anne 
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neige tp 
padtingt0 Las 
Lont-tanilyr'heiveeics Mae”, lue 


merit 
backgreundrcolor #8 
Bord px SoLLA #77; 
“nbkie-border-radtans 3737 
“oor-bordar-ratlusr 3925 
“matorderrodiuns 2% 
Bordr-radiusr JP 


Ajouter les effets de survol 


Lors des hover de vo champs, nous allons faire apparaitre grâce aux box 
shadow de CSS3, une bordure interne de 3 à gauche Pur ce tutoriel Fa 
choisi un vert très mignon re à vous d'adapter ke style à votre design. 
(De même pour La potion de a bordure, en haut, en bas à rate Vous êtes 
lechat! 

Anpureypesrvoe have, 


motsbo-ahadow 05 1px OK ME, Lnmet IX À © 4521689) 
o-har-ahadostOpa 1pk Op M£, inet Jp D 0 548289 
TL RE 
box-ahadouiOpe 1px Op ARE, Laser px 0 D #e)480à 
borde tipx solid #096894 


Ù 
[os] Ajouter les effets de focus 


Le focus est ation de pénètre dans un champ de armure. est 
Important avoir ajouter une interaction pour alerter Futisateu. une 
sorte de hey, est mo que us sélectionné. tu peux à présent écrire! 
Pour note xemple ja décidé de rem le champs de vert rapnie vous en 
Locus nous avons ue bordure, cette bordure va done tendre de L gauche 
vers drole. Vous pouvez changer de couleur lorsque le champ e remit 
une fois de pus vous êtes le cha! 
uxtaretéceus, 
Ampu{eypent eee} focus { 
ab t-bo-abadowiQpx 1 Op ME, Last 100Hpx € 0 
aasss 
no3-bor-ahadoiOp 1 Op #8, Lnset 10089 0 0 A9; 
0-box-ahado1Opx 1x Gp AE, inset 100$pn 0 0 50049 
=na-boxt-ahadoutpx 1px Dpx PRÉ, Anaut 1008ç 6 0 #00 
bat-ahadowipe 1p Op ARE, Lnoet 1008pe D 0 Sens 
coleritts 
Bord tip soL14 4437062; 


GG Le submit n'étant pas un 


champs d'entrée de texte, 
LL] il est de votre devoir delui 


donner un aspect différent et des 
interactions différentes. aiexs roure 


[06 PE 


Le subit n'étant pas un chamg d'entrée de te est de vire devoir 
de lu demner un sg fret et des mteractions dents, pour ne pas 
déroute ltisaeur à propos de son ulisation de son but l'ai chisis 
quelque chose de ès simple, ver de base transparent avec bordure 
Los du shoes 0x Pourquei lier le focus alrs que l'on n'entre 
pas dns le chame 7 Tout simplement pour l'accessibilité au cave, chose 
très importante lorsque vous développez dans une dynamique d'UX. 
past ( 

order tip soLid 4417062: 

Packproane-colee #56 

colorés 

tex-trmstormnppercnnes 

preres 

Lont-aiae laps 

Pair tsps 

Lineage sp 

abat 0x 1x a 138(0,0,0,0.4); 

sabit-borahadowt Op 1 Op EE 

noe-hon-abadont Op LP Op ES 

—e-bat-ahadorOpa pe Op« #EE+ 

s-ren-abadoutiq pe Ga 3 

BoxadonrOpe LP px #63 


vexs-ahadou® px 0 #1 
3 


[07 ee champs 


vous souhaitez rajouter des champs supplémentaires, rien de plus simple 
rieur pas de les englber das des < 12 cannot ></1L> 8 VOUS 
pouvez y alle, des denines et des centaines de champs Jai aussi créé une 
ass vbs qu vous permet d'air deux chamgs sur L mme ie 
Petite astuce qui fera gagner beaucoup de temps vo tlsateurs VDS 
formulaires sont conséquents mais attention à les utliser intligemment. 
On peut par enmgle penser une sut de rois champs CP/Vile/Pas. 
<Gi clame tse-bomes 
Drprmrees 
“input typeettert” nan 
rires > 
ns 
A chatons 
input <yper vert" amermall" placsholders "votre 
emait® ceqired > 
ra 
<div clanonrebrre/ aie 
nb 


CA 
ere 
nn 
D nn 
Dee 


Blacoholdae notre not 


Aleks Faure 
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Initiation 


Détiir tes champs de formulaire 


Définir les champs 


de formulaire 


L'image est primordiale pour illustrer 
votre page ou appuyer un commentaire. 
Voici comment créer des liens sur des 
images publiées dans un site web. 


lamanièred'uncoupon-réponsepapier,unepageweb 
peut aussi proposer un formulaire aux internautes, 
leur permettant d'envoyer un message, de passer 
commande ou de poster un commentaire. Passons 
‘en revue quelques balises HTML utiles pour vos 
pages. 


ZONES DE SAISIE 
La baise input permet de créer bon nombre 
déments intact. El cr de cette manière 


but name et indispensable car À permets lors du Watement du 
formulaire de ler ke données a bon élément et de les identiir correctement. 
ut rendant y permet de grise a zone de sas emphchantFutiateur 

dan modifier contenu L'attrbutBype permat de préciser élément que nous 

souhaitons représenter 

tant: zone de texte monlgne. On peut modifier La til du champ avec 
but aix, bmiter le nombre de caracthres à sai avec manlengh et 

proposer un contenu par défaut avec placahoder 

password : zone de saisie dans Laquelle le txte est camoufié Utile pour 

renseigner un mot de passe à ab des regards. 

mal le novateur se charge de Lester La sytane du teste renseigné pour 

éir u sg ben d'une adresse e-mail 

ur: demande à luilsateu de renseigner l'adresse d'une page web 

ef permet de saisir un numéro de téléphone Sur es navigateurs mobiles un 

cime spdcifque apparait, acltant le remplissage du cham 

Méden : champ. de lermulaire invisible permtant de Varmtire ve 

paramètre au script de atement 

Al permet utisateur indique l'emplacement un her qui pour tre | 

envoyé sure serveur. 


Nomenclature de noms d'images 


La base testez permet de sai du texte sur plusieurs ges. El s'écrit de 
ete mandre 


Les atrbuts row el cols servent respectiwment à indiquer le nombre 
de lignes et le nombre de colonnes à ficher dans La zone. Ses dimensions 
peuvent toutes être modifiées via les proprités width et big de CSS. 


CHOIX D'OPTIONS 
Hs souvent utile pour lutisaleur de pouvci sélectioner une ou plusieurs 
eptons dans une liste prédéie ro passés sofent à nous 

Input type checkbons permet de créer une case à cocher pouvant admettre es 
dits cheched (cochée) ou unchecked (non cachée) Pa aileurs, let possible 
de précocher une case en hi ajoutant l'attrbut check. On peut également 
désactiver La posuiblité de modiation dune case avec l'atrit lsbled 
Anput type radin: à la diérence des cases à cocher, les bouions radio 
permettent de choisi une seul ption parmi celle proposées, Chaque bouton 
do pesséder le mème attribut name pou que ke aviateu comprenne à quel 
sroupe d'options À appartient. Lorsqu'un bouton es coché, sa Valeur (dans 
Ft value est envoyée au script de aitement du formulaire Les Ubu 
chectedet disabled sont aussi valables pour ces boutons. 

La baie select est une atrnative aux boutons rai qui se présente ous 
ferme dune liste déroutate, bien pratique lorsque de nombreuses pions 
ohent internaute. El fonctionne de cette manière 


(Chaque option est renseignée dans une base option sans oublier dei 
assigner une valeur qui sera iransmise au script de traitement. L'attribut 
seected permet de réséectionner une option. L'attibut multiple placé sur la 
sie seit autorne La aéecion de plusieurs options, 


BOUTONS ET VALIDATION 
Pour envoyer le formule, faut placer un bouton de soumission qui 5e 
charger denéeter le sen cé serve. 
Anput type submit: bouton d'envoi du formule Le Lente contenu dans le 
bouton eut être inciqué grâce à attrbut value. 
put type reset bouton de réntialsation prmettant de rétablir et de vider 
lensemble des champs du formutie. 
input type button + permet de créer un bouton ei de ui signer un 
comportement personnalisé en JavaScript 
Le her Lormlaue nl dsponie sur le CD-Rom permet de comprendre le 
ctionnement des différents champs de formulaire présentés. 

Nicolas Schiff 
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Ds) ve ces nec CS EL 


+ > © D shoporacomir 
Giles de composa.. C2 Imports depuis IE 


Collection orage 


OÉHNEZ TOUS LS OUVRAGES RACE EDEN 


Blenvenue | à denuez-vous 


Recherche 
Envrezunmotct [Q 


ENVOYEZ UN MESSAGE 


sas 


Pour des questions à propos d'une comm 


où des ntormatons sur nos produits 


compte M contacter 


Seric0 | em Panier 


Si vous Votre adresse em Vous étiez déjà client de 
Vos abonnements, consultez Massage à 


Advancod Creation 


pour votre site 


Après avoir vu comment créer des liens 
dans une page HTML, nous allons voir 
comment créer un formulaire et associer 
cette fonction à la possibilité de les faire 
envoyer par mail. Vous allez ainsi pouvoir 
créer une page contact pour votre site. 


Créer un formulaire de contact 


ous allons aborder dans ce tutoriel les bases de 
Là création d'un formulaire HTML et y associer 
un autre aspect de La création d'un lien HTML : 
Là création d'un lien vers une messagerie avec 
Là balise “mails”. Cette technique n'est pas 
parfaite, l'utilisation des langages PHP ou CGI 
permettant d'améliorer la qualité des résultats 
noyés, mais ele constitue un premier pas idéal 
pour comprendre les bases de la création de 
formulaires etinviter les visiteurs de votre site à prendre contact avec 
vous, et même, pourquoi pas, à créer un sondage sur votre site, Vous 
trouverez les différentes sources commentées sur le CD. 


01 ER 
nee nee 
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[02 TES 


Pour créer un formulaire en langage HTML, at tir La bañse or ain 
le SlinirLe début tai de votre formulaire et déterminer La façon dont 
seront transmises les données Dans ce exemple, nous allons fire en sorte 
envoyer es donnes pa ma (tribut “ace. ) C'est aus à ce stade Que 
nous pouvons faire appel un sit PHP. CGI ou autre, mas c'est une autre 
histoire. 

Insérez out d'abord dans votre page HTML le code suivant laut ce qué suit 
dans celle devra tre inclus entre ces deux bis 

Début du formulaire: «ton 


Find lormulaire :</4 


Der 


Piuseurs types de chamos peuvent tre intégrés à un formulaire 
Nous allons ici voies prinipaux (baise Lg"). out abord le chamo 
detente (tente nm} quiva erir à collecter Les prinipaes informations 
souhaitées 

Commençons parle nom de lame 


Le prénoms le mate numéro de éléphone de lempédteu + 
<prrénm 
ADP éypertane nan peur >| 
«he 
<praix 
<< eypertent nana nai > 
«hs 
<préléphone 
“CHU typertart namme-néléphon > 
che 
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Créer un formulaire de contact pour votre ste 


<RT eyperradio sanesraese value 
es 


(Créer un champ à choix multiples 
avec menu déroulant 

Het aussi possble de créer un champ doté 'un menu déroulant. Ce type 
de champ peut se révler beaucoup plus pratique que le précédent si Vous 
Broposez grand nombre de chon Dans cet exemple ous los proposer 
à lespéditeur de sélectionner sa localté pari puseur pays francophones 


rare 
æ 
<se nmtarali té 
“Pr1ON VAL "Pranee "> Prance</GPOE 
OPFLON VAUT Del ique "20e 15 Lquec/ 
<orr1en VAL" saone ->Ani sec /0PTIA 
FLO VAL “Daxon Donc / OPA 
<rrLON VALUE" autre "Put re</OPFIOP 
eme 
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ete / Une lois les Gférents champs de vor formulaire défi ne vous 
reste plus qu'à jouer une entrée “subi” qi va permet de ver 
ces données et active l'evoi par mal que nous avons él au début 
de ce url. Pour cela vous ut utiliser La sytane suivante 
Ps 
Dev typerauatte values Envoyee > 
de 


(00 een 
de feuilles de style 

ete / Pour ambiorer La sé et la mise en page de vos formulaires, 
hésitez pas à vous ser de tableaux et de full de style CSS. Cola 
vous aidera à cplmiser et organiser vs iférents champs de façon care. 
ous avons file choix de ne pas nous en sav dans tutoriel afin de nous 
concentrer sur l'essentiel et de ne pas surcharger a syntare HTML de ces 
iérents exemples. À vous maintenant de créer vos propres orme. 
sondages QCM et be plus 


Olivier Perrot 


Initiation 


Qualité du code HTML et 
sémantique des pages web 


Tous les 


es Internet que nous consultons, donc toutes les 


pages qui composent le web, reposent sur un langage composé 
de balises, le HTML. Ce langage, en constante évolution, repose 
sur des règles et des bonnes pratiques qu'il convient de respecter 
pour garantir un affichage uniforme sur les différents médias. 


1 mous reconnaissons que toutes les pages web 
sont écrites avec le même langage, elles ne sont 
malheureusement pas égales entre lles du point de 
vue qualitatif. D'autre part La qualité du code HTML 
at sa sémantique ont un impact sure référencement 

naturel Auparavant considéré comme accessoire ou 
inutile, le soin apporté à a qualité d'écriture du code 
HTML est aujourdhui à prendre en considération 
comme une priorité. En effet. la concurrence est 
lus en plus présente, les sites web se multiplient t profiter d'un bon 
rélérencement auprès des moteurs de recherche devient de plus en. 

Plus ardu. 1 faut bien reconnaitre que 1 elle n'est pas La seule garantie 

d'un bon référencement, la qualité d'écriture reste un élément majeur 


SIMPLE ET OPTIMISÉ 
Tout d'abord le code HTML se dot tre simple et optimisé. dot étre tisé 
pour le contenu. La mise en forme dot se trouver exclusivement dans la CSS. 
Sa simplicité permet de melures prlormances en matière de chargement 
et de rapidité d'afichage. est tentant de revendiquer des bonds passantes 
toujours plus rapide pour ter eptmisr son code HTML. mais quelques io 
(Ocets gagnés dans un template destiné à être intégré dos un sie dyramque 
énérant des centaines Le code HTML se doit d'être conforme aux standards 
Al est possible de procéder une validation de votre code HTML par le W3C 
Nitp-Maitorwhorg/. Votre code waldé vous ofe une meileure portabité 
ét la garantie dun bon alehage Cest aussi un pet atout supplémentaire 
du point de vue vb et référencement naturel auprès des moteurs de 
recherche. Et au isque de sortir ur peu du sujet qui nous préoccupe. L capacité 
écrire dans un code validé est un gage de série t de compétences pour es 
obdesignes en herbe auprès d'employeurs potentiels 


UNE LOGIQUE DE VALEUR 
11 faut procéder à un choix logique et cohérent des balises. L'utilisation de 
aies pénériques (pan at du) est très tentant, mais en procédant parure 


La capacité d'écrire dans un 
code validé est un gage de 
sérieux et de compétences 

pour les webdesigners en herbe 


auprès d'employeurs potentiels. 
Stephan Lemineur 


tation abusive de tels bases, le HTML perd tout son sers. Les robots 
dinderation ne peuvent plus fire La diférence entre les des éléments, Un 
document débute par unir de niveau! HD, et ce de marre unique. Le reste 
tente est structuré avec Les diférents niveaux e tres (de 2 à 6, ben quil 
st assez rar de dev aller ha oi que h4) et es baies paragraphe (p) 
tation ( bciquote), déiation (4, 80. De même, est encre op 
courant de voir des baies ou qui ne veulent ps ire grand-chose si est 
une lo de mise en page On leur préférer es baies em et strong, Qu 0 
de vraies bases de mise en valeur Des articles qui se succhdent et de même 
valeur du point de vue contenu devraient tre inclus dans une ste ul, 1 ne 
Faut pas reléguer ces bales à La seule rélation des menus. Essayez. une o 
vtr code HTML terminé, de l'aicher ans aucune mise en page image. 5 
reste complet, cohérent et doté Gun logique de valeur entre les connus, à 
sav que le contenu de début de page es ps important et qu'à l'inverse 
contenu de fn de page este mois important. ae est ir probable que 
vtr code est optimisé 


choix DES D 
1 en va de même poux le choix des d et classes des divers éléments. Évitez 
des noms ro énérques comme tete” ou “paragraphe” que rensenent 
as sur a ture du contenu. Ne choisissez pas des noms corne “roue 
ou “colonne gauche” qui pouraent au al aficher du texte bleu dans une 
colonne ste _3 dote. 

Prenons une lengutur d'avance avec ls sémantique du HTIALS. En ef, sa 
Structure est cirement développée pour en amélorer la sémantique et 
augrrenter son vocabulaire” La capacté d'interprétation et de compréhension 
des contenus par ks moteur de recherche se vx accrue grâce à es nouvelles 
bases teles quart, bed, section. Puisque les informations SON pus 
nombreuses où plus nches en précsion es certai que celle sémantique ne 
pourra tre que bénélique pour un référencement nature correct 


Stephan Lemineur 


x 
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usqu'à apparition de La 
norme WA, les webmasters 

utilisaient les tableaux HTML 

pour la mise en page de leurs 

‘documents web. Cette option à 

rapidement mantr ses limites 
incompatiblté avec certains 
navigateurs (bugs dans La mise 

en page difficiles à détecter et à coriger 
manque de souplesse dficuités pour les mises 
A jour. Dès lors, les feuilles de styles ont été 


privilégiées pourrésiserles mises enpage.plus 
partiulèrementiesboitesdivetlesélèmentsen 
Position absolue. Ces boites div permettent de 
eréerunconteneur dontonpeut déterminera 
Longueur et la Largeur Vous pouvez également 
inclure des boites div dans une belle parent. 
Tous es styles (couleur de fond type de police. 
bordures, alignement) sont applicables. Le 
placement de ces différentes boites l'une par 
apport à l'autre dans votre page vous amênera 
aurésuitat final. 


f Dreamweaver 
permet de 
positionner vos 

div en quelques clics. 


| Guitares de collection de toutes marques - Vintage guitars of all c 


guitarecaliection: be vous propose toute une gammês d 
Vintage. 


Pas besoin d'une Gibson ou d'une Fender pour 
quitarecoliection. be toute une gamme de mar 
de votre instrument à 8 cordes : Framus, Hoyer, à 


Eko_que des guitares mythiques ! 


La paradis des guitares vintage ! des Archtop del 
allemandes des années 70°: 80", une large 


acoustiques, guitares basses. 


Recevez une guitare gratuite, toutes les infos dans notre rubrique "GAGNER | 
UNE GUITARE" 


Tutoriel 


Créer des boîtes pour structurer 


votre page 


Dans ce tutoriel, vous allez découvrir 
comment créer des boîtes afin de structurer 
une page HTML en définissant des espaces 
délimités à l'aide de balises div, que nous 
positionnerons ensuite avec du langage CSS. 
à structure d'une page HTML estune partie trè importante 
out des d'un ca. Sans ne base stable le pourra pas 
Etre vraiment ace. Nous aloes voir ensemble comment 
Eréer une structure pe de page HTML, rétilsable par La 
Suite dans de nombreur projets. Une fois ce tuori fini at 
lé un 0 parement Cable 8 jo ac es 

div at de les placer où bon vous semble afin de créer 
M isauirel 


GG La structure d'une page HTML 
est une partie très importante 
LL] pour le design d'un site. 
Sans une base stable, il ne pourra 
pas être vraiment efficace. riorian samois 


[o1| Préparer l'environnement 


Afin de réasr efficacement cet exercice Nes ut de parti sur une base 
saine et fonctionnel. Pour ea. je vous imite à créer un nouveau dossier 
detail À l'intérieur de celui-c, créez un autre desier que vous nommerez 
“css” Pour ni, à laide de vtr éditeur de code préféré créez un fichier 
HTML nommé inde. him qui sera polionné à la race de votre doser 
detail 


us 


[02] Mettre en place l'architecture générale 1/2 
Maintenant qu nous disposons des bases, va tre temps de compléter 
Le chier index htm ln de metre en lac La structure pénérae basée 
sur HTMLA et CS52. Cette base moe este minimum nécessaire a bon 
Lonclionnement d'une page web respectant les standard actual. 


ant hetprequive"contant-Typé contente "tent 
Mali charsetarrr-#> 

<atiee/asetes 

Link rolarstylaahaet heat 


<a 


Ali de terminera mise en place de l'architecture, nous alors remplace 
litre del page par: "Créer des boîtes pour structurer votre par. 

Créez une ei de styles nommée “style css” et placez dans ke dossier 
less” créé précédemment Noubiez pas de relier votre fehier CSS à votre 
fichier HTML en déclarant son emplacement dans en-tte, entre La bals 


“hand 41 < want 


Link relstyleahnet* hrofercas/ney19.cae > 
<a 


[04 Re 


La baise iv est un conteneur qui permet de défini une sion ou 
une section dans un document HTML El peut englobe pluseurs types 
éléments tels que des paragraphes, des images ou des Istes. El permet 
de structurer une page HTML En autarisant Fatirbution dun style at dune 
posian diférente pour chaque di 

<lpDeeei ant un exmpla</p></d 


OCT) 
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Créer des boites pour suture voire page 


Aa de tférencier chacune des du dune par, deux tb existent: 14 
arms L'145 pique à un bel rique, ne peut y av deux div OrIANL 

Le même id L'atiribut ans permet de caractériser plusieurs éléments à La 

Hoi et done d'appliquer un je similaire à eux du En CSS,un ét avec 

un ièse (exemple) tandis qu’une classe s'écrit avec un point (nel) 

“<br Ad" qation<poect ent un oumplec/p</div> 

<div classe hauten rca Rrefr ->Précbdenee >< /atve 

as claneenten os hr ssutvanee a 


06 ES 


Four commencer créez une dv wap qui contiendra l'ensemble de vire 
et permet ei déni ane ru À 'itreur de cet di picpae, 
cé que nantes qi ape eo respecliement “nd” "a, 
= et tonus, Comme leurs noms le out-entendent, chacune 
Borde nv Den dti 
ais Lévrap 
<aiv idee "><a 
<aiv Lena aire 
<aiv 1dercoment">c/ae 
ren Enrres 
«ae 


(07 PERS 


An de structurer corectement les éléments, attrbuez une Largeur la iv 
a ne Ai toutes celles contenues à l'intérieur de celle-ci hériteront de 
cat même propriété 1 na reste plus qu'à défini une hauteur pour chaque 


élément. Si besou apolquez des marges à certaines d pour les espace, 
pre À 
des Spas 
margin dope auto 


mcstné 20pe px Op O3 
Pgromndrcoloes 44204004 
3 


Pecntat ( 
baies 600p; 
mcsins pas 
Eschgromndrcolort 10200463 
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GG Afin de ne pas dépasser 
la largeur totale de la div 
“wrap”, définissez une largeur 
de 700pixels à votre div “content” 
puis de 220 pixels à votre 


div “sidebar”, riorion mois 


Four ajoute une sidebar à a page HTML 1 
de nommée tre 


lareur de 700 pas à votre 
Les 20 piels restants serv 


2/2 
retrouve sa pla Me 


ttre le flux d'élément 
ue Le x d'éléments se rétabise et que a div 


nu 1/2 
iquement en place. ajoutez un peu de contenu 

de div Danse cas 
pair seuement de défie 


auieles adapte automatiquement 
tenue du nombre de de 


Florian Jamois 


O1 bearposters.com (04 www serialcut.com/extrabold/#/the-book/home 
02 symbolset.com 05 svenprim.com 
03 ww gifmemoreparty.com 06 wallercreek.org/finalfour 
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Titre 1 

D der a at, connecter ain ad sud dam nano tincidunt « 
in hendrerit in vulputate velit esse molestie consequit, vel illum eu feugiat nu 

Jiue2 ( 

pue ES PE Dies Ts ‘sed diam nonummy nibh Eng! 

eum iriure dolor in hendrerit in ce pin ed dm nn ae 

option congue nihil imperdiet doming id 
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üt laoreet dolore 
rulla facilisis at vero 


ut laoreet dolore 
iulla facilisis at vero 


Initiation 


Découvrez six notions indispensables pour réussir votre mise en page : aide 
à l'intégration, transformation d'un texte, création d'un cercle sans image, 
superposition des div ou éléments, centrage du contenu et utilisation d'une 
police de Google Web Fonts. Les sources sont disponibles sur le CD. 


QU'EST-CE QUE L'AIDE À L'INTÉGRATION ? 

L'aide à intégration pour bjecll de vous mantrer quelques astuces ut qu 
améloreront et cieront la mise en page de votre site. La ghase d'intégration 
est la plus importante pendant La création d'un se Internet (irine ou 
marchand) El di être clair et structurée, afin de aller le dhveopoement 
en PHP.Lesnoions Indispensables en CSS sont limitées à vous être curieux 
pour en découvrir autres sur le Net 


2 TRANSFORMER UN TEXTE EN MAJUSCULES 
OÙ EN MINUSCULES 
Si vous souhaitez mettre entièrement en majuseules une cation un tire où 
une phrase pour Lo mettre en avant sur votre ie iles La progridté CSS 
“tantranslorn” en cblant votre class ou lé, sun du paramètre “upper” 
{mauscule) ou lowercase (minuscule) 

mag (tert-tranatormtuppereases} 

ini (next -arans for dovarcate } 


3 CRÉER UN CERCLE SANS IMAGE AVEC DU CSS 

Le temp de changement d'une page web dépend souvent du poids des images 
À chaeger lors de son afichage. Ain d'économiser du temps, préférez Le 
propriété CSS “border tadus” pour créer des bords arrondi sur vos di. Vous 
pouvez également créer un cercle en visant par deux Largeur ou L hauteur 
de vote di ten afectant résultat obtenu a propriété “border 
Hcarsle (uideheSopey balgheipny background-colae bac; 
Borde radis 129584} 


4 SUPERPOSER DES DIV OU DES ÉLÉMENTS 
Utilisez La praprité“postion et mettez toutes vos ven “abnclute” dans une 
casse commune. Ajoutez à chaque dv un d et une propriété CSS “rider, 
cela au pour elle de superposer vos éléments par plan (1 = en dessous 
22 au-dessus, ete) 
Voile HTML. 

<div class die" Aéresrrel>/d0e 

<div clasenraiye Léerearre2rre de 
Voile CSS: 

ai (posielontabaolute) Leée:50paz eopuSope} védehe10ope; 
eghe100p:} 

fcarrel (16EEH100px Paohgrount-coloribeouns 2-inder2; 


Alter alphalepuelty10): epaeie10:53) 
Parez (inteiSopu bachground-caloryeliour 2-bndent3}) 


5 CENTRER VERTICALEMENT ET HORIZONTALEMENT DU 
CONTENU 

Cette astuce vous era d'une grande tit. El permet aligner verticalement 
Le tete dans un menu. Uliez La propriété CSS “algr-height” et inscrivez a 
rêveur que La hauteur de L 6 qui englobe ke ent. 

Hrarticaiement (hachgrount-colo 16064666; padding- Left; 
Paie t50pns Line-helghes90p} 
Pour centrer Poraonalement un tent 

propriété CSS te 

Srimtérieur). 
(mcetaomalement {hschground-colorsécccccc} padding 
ettstpx heighetSopn tert-alignicenter)} 


une image, chez la du avc La 
ah suive de “center (ce qui cetrera tous les éléments 


6 UTILISER UNE POLICE DE GOOGLE WEB FONTS 
Le paies de base iponibes en CSS limitent notre créatité Alors pourquo 
0 pas en jar de nouvelles ? Une méthode simple est proposée par Google 
We Fots. Rendez-vous sur le site et choisissez votre paie en quant sur 
Fcbne“auckvus”. Sélectionnez votre format puis copiez/alz simplement Le 
code correspondant à a feuille de styles de La police dans votre fichier HTML 
entre es baies hand. 

Link bete heapu//fenta googlenpie.can/cnsrtonliytoonomien 
rein etyleshet* Ep tent /c28 > 

Pour acier cette police dans vos paragraphes, d vous suit de l'appeler en 
sat La propriété CSS lont-amih suivie du nom de vore nouvelle police. 
D fene-taiye Peconien”, sans-ourt;) 


GG Les notions indispensables 
en CSS sont illimitées, 
à vous d'être curieux pour 
en découvrir d'autres sur le Net. 


* 


SAVOIR TOUT FAIRE pour 


LE WEB 


+CD 


INCLUS AVEC TOUS LES 


FICHIERS 


D’EXERCICE 
J  10Ë 
je 
cs AE TMLS Dans la même collection 
: Bande desainse 


Créatures sumaturelles 
Dessin et peinture numérique 
- Effets de texte 
Manga 
Mate painting 
Montages et effets spéciaux 
Personnages féminins 
- Personnages humains 
- Photo en Noir et Blanc 
Photomontage 
Photoshop Elements 10 
Retouche photo 
Science-fiction 
- Tutoriels Volumes !, 2, & 4 et 5 
- Webdesign 
et bien d'autres. 


DISPONIBLE EN LIBRAIRIE 
S HOP.ORACOM. 


NN 


m 
Oran 


Tutoriel 


re 1 


Lorem ipaum dolor sit amet, consectetuér adipiscing eli, sed diam nomummy nibh eursmod tincidunt üt lnoreet dok 
eur iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla fociisis at 


Je? 


Lorem ipsum dolor sit amet, consectetuer sdipiscing elit sed diam nonummy nibh euismod tincidunt ut Inoreet dok 
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at 


option congue nihil imperdiet doming id 


Gérer la forme avec les CSS 


Les propriétés CSS vont nous permettre 
d'enrichir notre présentation en jouant sur 
la mise en forme du texte, des paragraphes, 
des liens, du body de la page... 


ous avons Ia possibilité soit de définir des 
classes qui associent à des éléments (blocs de 
texte, images.) différents styles, soit de définir 


permettent de créer une mise en page élaborée 
Pourtoutesnospages du site, auxquelles nous pourrons ultérieurement 
ajouter de nouvelles propriétés, de nouvelles classes. 


O1 


Nous allons définies dfrentes propriété durs tie que aile 
La couleur le type de police épaisseur. Nous applquerns cs déférentes 
proprités aux balises (paragraohe et aux balises, 2, tres). 
Toutes ces propriéés relatives dune ble 'écront de cet manière 


Exemple 1 - mise en forme du texte 


[02] Alignem texte 


ous avors La possité à l'aide de La proriété text-algn de placer (crime 
avec un tatement de texte le texte Cu un paragraphe) à gauche Cet) où 
À rite right), de centrer (enter) ou de le justifier Gus). 

Cx 

Tent-alignicenters 

D 
Le paragraphe sera centré. 
L'exerple 02 ml crée quatre dasses qu aligneront le txt (paragraphe) 
amants quatre poutions poses 


03 RE 
Son et 
RTE ee 
ee 
Re ep 
se 


ropriétés de liens 
Comme pour les Lxts, nous pouvons madiier a couleur es lens La taie. 
la polie, etc 
Ilexse quatre types 
a en non it. 
au: en visé, 
ver en sur 
3 rastive clen act 
Nous utisrons La proprité et decoration pour changer ete 
de soulignement du er, liste quatre valeurs possbles 
nas: pas de décoration de tete, tete n'est don pas souigné 
ce Line: tx est souigné 
avt in la ge se irouve aurdessus du tete 
Linea la ligne psse à traverse ete 
Exemple 
a ik {uext-dacorathontundorLines colorigreen 13//Le Lien non 
visité mot sueLigné, de couleur verte. 
L'exemple 03h vous montre quelques mises en orme de lens, consiter 
la soure de a page pour observer es propriétés liées 


[05 PA forme de la balise body 

Les propriétés CSS de La balise sy permettent de déclarer une ms 
en forme général que l'on retrouver dans toutes Les pages du 5e 
Nous pouvons y déclarer les propriétés du tente, une image de lon. 
Les coueurs de lens, Les marges, ec. 

Exemple 


s d'unlen 


rimes es Roman, Times, Mer 


coler1#2300rrs 
Background-color1#00ccr} 


; 
Déni pourla page du texte detail 1 
ainsi qu'une imags de fond bleu ciel. 


GG Nous avons la possibilité 
soit de définir des classes 
qui associent à des 

éléments différents styles, 

soit de définir séparément les 

balises HTML. viser Beeckman 
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Gérer orme ave es CSS 


[06] Définir une image de fond 


ous als défi une image de fond dans La bals y (inchgrount 
==). Cet mage peut tre répétée ou fie au moyen de La proprité 
rot opt qui peut prendre pour valeur spas (l'image est répétée 
dans tonte document) spa (répélion dans le sens horizontal), 
aps rap (image n'es pas répétée. La propriété ace 
22cm permet de défi attachement a (l'image de lond ser fine) 
au ro: image de fond ser mobile) Exemple 

Bey 4 

Backgroandnttaciment 1e0r01 

bacyromnd-color 100766; 

bscgreand-iagerur (c93,pa9} 

Fachground-repant1repnat 

» 
L'image de lond css png est répétée hrirontalement et dé suivant 
des mcerseurs 


(07 
D nent 
as 


TITRE 1 
Lorem ipsum dolor sit amet, consectetuer adipiscin 


T2 


Lorem ipsum doler sit amet, consectetuer adipiscin 


Exemple: (06m 
mn 
tont-tmiiysVerdens, Hal, Mélveties, sans-nurl 
Lntaines dep; 
teat-wightitolds 
cle 1#000046; 
cens-decoraronrender ins; 
D 


CAE ner 
ob es 
ee en 
A en 
Se te 
pee 


Initiation 


SELECTEUR{ PROPRIETE : VALEUR ; } 


2 k ” 


3 La valeur de la propriété 

A quelle(s) balise(s) HTML. ä Ra 
la propriété s'aplique La propriété (ex: pour Ha couleur rod: ) 
x: body") ex: la couleur "color") 


Les principales propriétés du CSS 


À travers les étapes de ce tutoriel (structuré 
sous la forme d'un mémento), nous verrons 
les principales propriétés du CSS. 


es fouilles de styles en cascade (CSS) constituent 


page. En eflet, cest dans a feuille de styles que l'on va 
déclarer toute ln mise en forme des pages en utilsant 
es nombreuses propriétés. Pour commencer, nous nous 

intéresserons aux propriétés de mise en forme du 
teste (modifier l'alignement, 


listes à puces, L'utilisation de CSS nécessite une connaissance de 
bise de HTML 


O1LES STYLES DE LA POLICE 
Pour commencer, ntéressonsnous aux sys de La po (aile épaiseut 


CE RTELAE EE 
ar is out ne mi 
term NS NT | oanmenaunes 


En.tp (éone-mis 


Enpouen pourcentage, e-smal amas medium, 


fontaize large. xlare cle Taie duteste 
font-style Sie dutente 
Paicel poce2 poñice3 Poîce du tente (a première de La liste sera usée 
Suis EnER (font-tmtiye ais les présente sur ordinateur) 
fent Exp (toner bois 


Raccourci pour les diférentes propriétés de police 


Initiation 


+ Les principales propriétés du CSS 


dimstisine 

ÉÉUELE SSRSENEERNES 

rues 

tentalgn né Défi agnement du tete 

tte SH enceinte on) (0 | aitu ao mire dub ie 

= emo Déni andré due 

cr Cr mng voté Décodeur dite 
pese eq 

toast ra concis em opt nat | pat came date émane) 


O3LES ARRIÈRE-PLANS 
Après avoir vu les proprdtés de mise en forme du txt, nous alons nous 
intéresser ut images de fond. 


background Bip (gré Lampe. Aié En at} Raccourci pour les iflérentes propriétés carire-plan 
Couleur hexadécimal écriture, AGE) ou transparent 
backgroundelor (poor triple Détiita couleur de arrière-plan 


ossi EE Cotentin immait Dre 
Fépat où no-repeat au repeat (x = nombre 
de répétions oriontales) ou repat-y 

bockground-repeat = ombre de répétitions verticales DétiitLafaçon de répéter l'image 'arre-plan 
Exp (Oachgraund-baugne ing. 
Pachgrount rep repas. 


ep center boiom left, center right En points pinces 


panisetéon in) centimètres Cm) pires (n), pourcentage (%) | Spéciie a position de l'image d'amère-plan par 
Ex. :body (acrout-taages Lits apport au ain supérieur gauche de a fenétre 
bachgrountqoaitiont eg 2pt) 
Scrû, fined 

Background-attachment CR GR NE ère 9 ra 


Er bchgronnd attend) nhsis an aRere) 


4 LE MODÈLE DES BOÎTES 1/4 : LES MARGES EXTERNES 
À présent, nous alors découvrir les propriétés des marges des dément. 


I TE 


mn {Ut de longueur ou auto 


Exip parsin-tepe ar) lisses 
rmargin-risht Marge ro 
{Unité de longueur ou auto 
margin-bottom fre rie DE Margeinéreure 
æ Longueur auto 
margimef TS ae Détermine a vleur de La marge gauche 
margin 1 tarsins 20pe 3pe Sp puy Regroupe les dférentes propriétés de a marge 
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SLE MODÈLE DES BOÎTES 2/4: LES TAILLES 
Voyons à présent comment défini fsclement La auteur et La lageur dun 
dément 


Crus | CE 
pen 

Mit Ex :idiv (beiguerl00es) Lmarol 
Longueur pourcentage 

van En: iœir puidenshé0pe) Lan 
on 

pr re pr 
papes) 

pr ra nacmu ie 
Pres 

peer cons pese 
pres 

max-height Be : LD (ot GA 2 1000) À ee 

06 LE MODÈLE DES BOÎTES 3/4 : LES MARGES INTERNES 

Pr Le 

es 

EE 
D D Vo = mn amu 
Rte PI Sn EU © 

ue CNE Luna atniétent ne 


ECM) (pion 2) 
en pains (pt) inches in), centimètres Cr), pl (pu) 

pading-reht ou pourcentage (6) Valeur de a marge à dre entre élément et le bord 
ENS (pilotes 3) 
en pains (pt) inches ir), centimètres (er), ins (n) 

pading-bottom ou pourcentage (%) leu de a marge en bas entre élément ete bord 
Euh (piog-borront 3per) 
en pains (p). inches in) centimètres (em, preis Gp) 


pading-ett ou pourcentage (%) Valeur dela marge à gauche entre l'élément et le bord 
EHtà (pasi-lates pu) 


‘07 LE MODÈLE DES BOÎTES 4/4 : LES BORDURES 
Ales possible d'utiliser des bordures pour beaucoup de choses a couleur le 


style, etc. 

LS CT 
DRE poor 

Es tin tas 

en cantssndieatsiteiee 

ESS ces 

ordervidth eu em onionmtl 
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* Les principales propriétés du CSS. 


[44 Les feuilles de styles en cascade (CSS) constituent un outil 
fantastique pour la présentation de sites web puisqu'elles 
LL] permettent d'embellir la mise en page. nicotos wotterend 


08 PROPRIÉTÉ DE POSITIONNEMENT 
Le positionnement CSS permet de placer un élément exactement où lon veut 


re 
Cros nersresbsrmmnes Losscrnien | 
”s Rose. crea tt 
ER 
… sonne aire 
poser Certes I tode de patine de Flent 
up sn e Fontana apport ashat 
nm Érres Festin por rapport à gauche 
cn Ds Poninpar port tte 
bottom Creer ou) {Position par rapport au bas 
rom PE SR TRIER TES 
les CRE 
PL sas crérmnsen (eye 
Cros Lnersrestsrmmnes Dascrpien | 
mine iron étroits 
Re) 
utatieimge PES Permet de remplcar es puespruneimae 
pes Sceae 
Hst-atyle-poskion Ex tu {let-seyie-poitions 1nade:) Qu l'extérieur du tente 
po CET Rens ner 
ou on à manon art 
me 


Îlen ste de nombreuses autres (plus de deu cents, dont beaucoup sont ès. 
rarement utilises), pour les tableau, pour affichage lc. este aussi des 
rapriétés concernant le cn, utilisées pour access, sans parier de toutes. 
Les nouvelles proprdtés offertes parle CSS3 


Tutoriel 


Créer le lien entre les fichiers 
de styles et les pages HTML 


À travers les étapes de ce tutoriel, 
nous verrons comment lier une feuille 
de styles à nos pages HTML. 


eCSSnouspermetd'embellirtaprésentation 
de nos pages (changer la couleur, La police, 
la taille, ete). Dans ce tutoriel, vous 
apprendrez à attacher un ficher de styles 
(CSS) à vos pages HTML. Pour ce aire, nous. 
verrons l'utilisation de Là baise <link> et La 

régle import. Pour ilustrer notre 
exemple, nous appliquerons du style 
un paragraphe. 


[01 


Pour commencer nous allons créer une page HTML qui ser notre page 
drnemole 
Pour ce ar, ouvrez votre éditeur detente créez un nouveau ficher index et 
enregistrez le avec l'extension him Ajoutez le minimum de bases HTML. 
IDGCPIME ea 
she 
sr 


<titlétitre de La page </eitle> 


Jeuterun pérsgraghe e 
Him eréée précédemment. 
> de mue un paragraphe </ 

Nous ajuterons du sl danses prochaines tapes 


(05 


nous faut à présent eéer notre hier CSS qui contiendra ls style de notre 
page, Pour ce lire, faut rer un nouveau ici “monSWyie” et emregarer 
mec lentesion cs 


‘Ajouter le style 


Dans note fichier mont ss, nous aoutons La couleur rouge ue tale 
de 50 pie et aignons au centre ous les paragraphes Ce sys apolquerà 
lorsque nous aurons attaché La feu de ses à notre page inde ti 
» 
n 
solar red /remuleu da exts en coupe #4 
tassraligne centery /etuxte aligné ao cmtree/ 
Lontstans 2e freaille relattte + 


105 FE 


Pour créer een entree fichier de styles et les pages HTML. eniste 
‘trente açons de procéder La ps couramment ulisée et La plus 
conseillée état utisation de La bals HTML < Lan qu permet de 
spéciier ls relations entre les pages du sie le accepte plusieurs types de 
documents : des pages HTML. des leiles de styles, des ressources ter. 
{ar eme un fux RSS ou Atom) ou une avion. 


[06] Attrik 


La baise can 7 atrbuts, dont deux obligataire: le 
1ype de relation et at, ressource le 

Dors cas une tation avec une feuille de styles, nous ajoutons Fait 
y qui défi le type de document (1ype="tet/ss”)insique lat 
12 qui dé le type de média vers lequel ser interprété le document 
rélrencé (screen. print. 


(07 Ps 


Maintenant, dv fl modifier a page index ht pour ui dire d'utiliser 
notre huile de sys monStiess,Nour joutons notre balise <ink> entre 
es bases < han 8 «rm 

<ink releretyishet” hrote-mentnyls,cas” types text/008* 
mia ecrenn" D 

Pire fui de ses es maintenant attachée à notre page HTML index 
mi ete sy s'applique bien à notre paragraphe Caliement au centre et 
de couleur roue) 


[08 er 


Comme je id plus haut, existe dffrentes façons pour une feuille de 
yes à nos ages HTML 

salons voir à présent La 1ège impor. st une propriété CSS2 qi doit 
être suivie de TURL dun cher qui cantiendr des styles à pplquer en pus 
ea fui de styles en cours El permet de créer des feuls de styles lus 
votes (on be un sul Beer depuis page HTML, et on gère impor des 
feuiles de tes directement depuis ce fichier CSS racine). 


lise <linke> 


cr 
Attention, ubsation de cete règle ralenti considérablement e chargement 


des stfes, donc de page 


Définir 
un style CSS 


Suivant la situation, il y a plusieurs 
possibilités de déclarer un style CSS : 
style de type classe, balise HTML, id, 
pseudo-classe, etc, La combinaison de ces 
différents types de styles vous permettra 
de rédiger des mises en page élaborées. 


1 peut y avoir plusieurs règles CSS dans un document. Pour 
rappel, une règle CSS se présente toujours sous La forme + 
sélecteur (propriété-valeur;) 


+ DÉFINIR UN STYLE DE TYPE CLASSE 


{Une classe peut 
une image, à un en 1 suffi de lui ajouter Fatrbut ls avec le nom 6e la 


Le nom dune classe commence loupurs par un point sui d'un Wei. Ce 
dernier peut tre composé delete et de chltres, mais jamais de caractères 
spéciaux 


2- DÉFINIR UN STYLE POUR UNE BALISE HTML 
Nous pouvons déni un sil pour importe quelle baise HTML. Dans toute 


Exemple dans le code TL. 


Chaque partie de texte défini ar La balise tre <> apparara en rouge. are. 
la police de caractères Geora. 


3- DÉFINIR UN BLOC DIV 

La baise dy, qui ini division, permet de créer un oc de tente. 

{Un bloc de tete peut contenir tous es types de bases usées pour le 
contenu Ca, ag «ab» table.) 

Une balise div peut elle-même contenie autres balises dv On utilise base 
iv pour regrouper du contenu ayant La même signification ou le même style. 
(Oh peut également modlier le sy due boite de contenu. La déclaration de 
a baise div se fit dans le code CSS au moyen du signe # sui d'un el 
Am ea alta 
Elles appelée dans le ende HTML vi 1D= nom. de JP. 3 
Exemple dans Le code CSS 

oo 

oo 
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Définir un ste 655. 


votre texte ici 


[L 


rguie signée que le paragraphe <p> appiquera les deux régles CSS, La 
derrière casse dans l'ordre d'écriture prédomine. 


5-PSEUDO-CLASSE 
Les sélecteur dort formule est baise ta sont appelés pseudo-lasses 

I nous permettent de déni plusieurs ges de style pour une seule balise, en 
Hention de état de cet baise 

Les baies de lens 3 viied a active sont les plus courantes. 

(On peut tierce concet également pour d'autres balises (A 4 1h), mais 
La compatiiité avec es dents noigateurs rest pas toujours assurée. 
Empe 


DiterBescimen ŸQ 
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Feuilles de style internes 
et externes 


Les feuilles de styles permettent de regrouper en un 

seul et même endroit toute la mise en page de certains 
éléments de votre texte. Découvrez les différents types de 
feuilles de styles disponibles pour publier votre site web. 


(Des paramètres du style seront appliqués à votre 

page web, qui fera appel à Ia feuille de styles 

associée. Vous pouvez par exemple créer un 

style “Tire”, un autre style "Sous-titre, un autre 

“Texte” et un dernier “Signature”. Le style étant Le ste estii Gé àl'de de deux propriétés fonts e lot, al 

défini une Hs pour outes, vous pouvez vous en de déterminer respectivement à tale des caractères et le nom de La police, 

servir dans toutes vos pages efficacité et gain de Emiron soiantedi propriété sont disponibles, chacune disposant de quatre 

productivité assurés! cptions en moyenne. ce qui Laisse une marge de manœuvre {ré importante 

1 xls trois façons de créer une feuille de styles: Modif des sis estants est ne possblité mai dans certains as, vous. 

dans l'en-tête de la page HTML pour définir le style d'une page entière: souhierez peut-être créer des sys pus personnels, Heureusement, créer 
localement, devant un paragraphe, pour attribuer un style à une partie es styles nest pas plus fic que den moi 

précise du document La déindion dun nouveau style nommé “Wire” se réalisera comme 

;ésnsundocument etarepartantetension cas apalé dans chaque rond le à ec rs ue om der rc 

jocument par un lien. 


MODE DE FONCTIONNEMENT DES STYLES 
Les styles sont définis entre les balises sy et «ane. Vous êtes Be 
de créer de nouveaux bles ou de modlier à volonté Les sys intégrés du 
HTML. Quel que so l'emplacement sélectionné, vous ferez ape à La aise 
“<asyle. Vous pouvez par exemple réf le formutage de balise HTML ni 
qui définit un ire de niveau? Maintenant que le principe général de La création de style a été posé, reste 


D PE ri mod or pan TL dre 
où 


TROCTTPE Men PUBLIÉ *-//M00//PID KIT 1.0 Transiciemai//Ee 


GUN crrs/ mass ora/ri/antmit/0T0/antali-cransiticnal. 64" Mon titre défini avec les styles | 
MN ins mmrnrrnctnt//arudorg/ 1999 made 
D uns 
#4 ages rcontent-Fpe” contaneeteee/DeRtr 
# % 
MIN “icicsocumans sans nomc/cicie 
Mure 
us 
al x viser 26per 
WU sont-rantiye Aria: 
F 
SN re 
EN re 
5 
mi 
Eu cos 
RON Cas Mon escre détins avee en seytes dns 
Qu 
OM <a 
PE MES 
n 


{Un style afecté aux tres de iveau 1 appliqué à ensemble de La pag. 
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Feuilles de te internes a terne 


con [Fr joue | mana @ D D TLC D mme: Cet 


p 


TR Em 1 /DFD/ ntm 


L'application cale de style sur une baise HTML 


PLACER UN STYLE DANS L'EN-TÊTE DE LA PAGE HTML 

Ali de erer une felie de sys ntm dans lente de La page HTML. 
vous devez définir en haut de La page HTML un cri nombre de styles 
personnalisés ou non qui vont s'apliquer à ensemble des bases de votre 
pags Four dre un style dans l'enstte de La page HTML. vous devez insérer 
La balise «rein, tele que vue dessus, entre Les balises cn et </h 
Dans ce cas, es ses définis dans en-tête 'applqueront à ous les styles de 
La pags, Par exemple, si vous déiisez un style pour La base 1 qui permet 
insérer des Lres de niveau. out tete encadré entre deux bles 1 sea 
automatiquement formaté selon ste apoliqu dans Fen-éte (sue OD Un 
y fléau tres de niveau} appliqué à 'ensembde de La page 


DÉFINIR LOCALEMENT UN STVLE 

Autre possiblté, appliquer des styles non pas à toute a page mais à un 
paragraphe ou à ur en en particulier Cette méthode ne Go pas dre 
Bénéralsée pour de nombreut éléments une page. car tout l'intérét Eure 


Cest paragraphe a lequel st piqué localement un se 


MBIMAN «mecs hecp-equiv-concent-rype* concentercent/tmi; 

F ; Se omnns voe metfstste 

kil 

mms eme 
e L d 


rise à jour rapide et unique disparait les. Par exemple 
<P srræs'eolor1graen">Cecl ent un paragraphe mur Lequel 
(ent appliqué localement un styles GR 


INSÉRER DES STYLES DANS UNE FEUILLE DE STVLE 
EXTERNE 

Si vous souhaitez utile les mêmes définition de stye pour l'ensemble de 
votre se web, vou avez alors tout intért à Les regrouper dons une pags 
eserme portant extension ess, par exemple sys, Aprés ar défini vos 
tps ave balise <styie> dans votre cher cs, vous devrez l'appeler par 
ben depuis votre page HTML 

Pa exemple, le code d-dessous permet d'appeer une eulle style cs3 sue 
dans Le même dossier que La page HTML qui doit ire mise en page 


<LAnk reretylosbes. 
Karine Warbesson 


Quelle application pour créer ses feuilles de style ? 


webmaking made easy 
MOZILLA THIMBLE À 4 


EE 


Tutoriel 


Créer et appeler 
une feuille de styles externe 


Apprenez à stocker toutes vos définitions 
de style dans une seule page. En cas de 
modification de mise en page, il suffira alors 
de remplacer le style de votre choix sur 

une seule et même page, la feuille de styles 
externe. Les éléments sont sur le CD. 


es feuilles de styles sont au web ce que les styles sont aux 


logiciels de traitement de texte. Associés à des balises HTML. ‘ 
les mises à jour sur votre site web. Let y = 


où UtraEdt 
a appel au logiciel Dream 


in de créer vote feuille de sys. Dé 


1006699. 
= TEXT-DECORAT TONI 


chier en tnt que ei de styles, Sélectionnez 
commande Fee Enregistrer sous Dans Liste déroulante Type, 
chosissez Al documents. Nommer ensuite vtr fiche, par exerple “lle 
us Veil ie à placer point entre le titre et votre erension 


[02] = 

Ouvrir un nouveau fichier 

Placez la déclaration de style dans un fichier texte sans indiquer les balises = 

sel </etyi. Votre déclaration de le commence par un tre sun = 

dune acclade, de propriétés at rerefermée parure P 

Aaccoade, sans oublier les ponts rules en fi “ 
mi 
micro iblue ER 
combles - 
LrRR-GHACDIG Len RE 
ane 


comme su, en plaçant ce code dans len-tte de votre page HTML 
“ADR HELSRILESNEET MREP= ele Cas FPE bee /enn > 

Îles pariaièrement important de ne pas mettre es guillemets placés dons 
a igne de code 


Fatiospnes we touutie de eye ememeuniie 


in d'accès. 

Danse code dessus, nous partons du principe que votre page web et votre 
Feulle de styles son placées dans le même dossier ice net pas le cas, 
vous devrez modif le chemin d'accès dans age de code. ar ememgie 


iseei-ee moe #7 


[06 Pr 


Ses éléments de votre hier sont réduits au strict minimum Le code appel 
la fui de styles dot se placer impératirement dan le téte de votre 
page Web, qi doit comporter les éléments suivants 


Tutoriel 


-Grér et appeler une foule de tes enteme 


07 PR 


1 sf ensuite d'utiliser la baise correspondante dans votre pag pour 
ue le sie précédemment enregistré dans La eue de styles externe 
st automatiquement appliqué. ins 5 vous souhaitez modlier ous les 
Titres de type I de votre se. vous ne modifiez qu'un seu fichier votre 
feu de styles. Le code suivant vient La suite du code présent dans 
l'étape 06. Atertion dans Dreams. aperçu à droite ne correspond 
pas systématiquement à l'aperçu réel dar le navigateur. 

ae 

<> men titre ais en page avec un style </H> 

<a eut + htapu//nmsnaien conte Len vers mo alta a 


108... un aperçu des résultats obtenus 
pr 
a en ne 
os 
HÉMSeNE cour 
Re ee 
SE ee 
Tone eme 
nets 


* 


GG Vous pouvez faire appel 
à un éditeur web du type 
Dreamweaver ou utiliser 
un éditeur de texte brut, tel que 
le Bloc-notes ou UltraEdit pour 
créer votre feuille de styles. 
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me 
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vu 
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07 wwvciracom 
08 wwwexplanimate.com.au 
09 wickedpalate.com 


Galerie 


| WE MAKE 
JEXPLAINER| 

VIDEOS 
1 


9 


10 moto oakley.com 
11 wwwakeercz//er 
12 contrastrebelion com 


Valoriser votre site web 


Valoriser votre site web 


72 initiation 80 initiation 
74 initiation 84 Tutoriel 
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Ajouter et imbriquer des listes 


Les listes sont des élément de 
mise en page particulièrement 
pratiques lorsqu'il s'agit de réaliser 
de la rédaction de contenus sur le 
web. Voici comment hiérarchiser 
différents éléments grâce aux listes 
ordonnées et non ordonnées. 


(01 LES LISTES NON ORDONNÉES 1/2 

Les listes non ordonnées sont aussi appelées ste à puces. Elles permettent 
agencer des éléments sans ordre particulier et ont agpai à a als <>. 
les se placent dans le corps de La page web, entre les bases <aior et 
<2onv.Parexempl 


Ce code permet obtenue Iste à puces de vos diférents éléments. 


Si vous ne spéeliez aucun attribut dans La baise >, La ste par dtaut est 
constitue de puces pleines, mais 1 este dférents types de ste que vous 
pouvez défi grâce à 'atibut TYPE de a balise «af de spécifier trois 


{Une liste à puces non ordonnée composée de puces peines, les puces par 
défaut 


types de listes les listes non données (puces, tirets, ec.) 
Combres, lettres, et, et les listes de définition que nous allons détailler dans 
cet article. 


es listes sont des éléments de mise en page particulièrement pratiques 
lorsqu'il s'agit de réaliser de Ia rédaction de contenus sur le web. 
Particulièrement adaptées Bunstyle court concret et concis, les istes sont 
notamment utilisées pour afficher un sommaire, énumérer les éléments 
une recete, insérer les étapes d'un processus etc et constituent lun 
des éléments indispensables en matière de mise en page sur le 

web Différentes listes peuvent coexiser t s'imbriquer entre elles, 
créant automatiquement les retraits nécessaires. existe plusieurs 

listes ordonnées 


(02LES LISTES NON ORDONNÉES 2/2 

ec un autre exc de liste non ordoanées avec des puces de 1ype carré 
4 puces érdées 

a ste de causes 


Dans cet exemple deus listes ont également été Imbriquées ave l'insertion 
de ls base 1 rome “emesa » au mieu dune autre te Un retrait à 


Lo 
ME 


Créer des listes personnalisées 


O3 LES LISTES ORDONNÉES 
Pour créer un ste ordonnée simple, vous devrez lire appel à La bals «> 
avant les léments au bou de La balise <> précédemment vue pour les Istes 
non ordonnées. Les valeurs de Ft 
rvme placées dons a baise <cc> permettent de soéifer Le te de bte 
souhaité 
-rrre pour les séquences de lettres en majuscules 
8 rar pour les séquences deleïres en minuscules 
pour les séquences dechire romans en mauscules 
“our les séquences de hifres remains en mueuies 
1 pour les séquences en nombre arabe. 


RE le 


con 
FIRE 
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Ajouter etimbriquer des ste 


GG! existe plusieurs types de 
listes: les listes non ordonnées 
(puces, tirets, etc.), les listes 

ordonnées (nombres, lettres, etc.), 

et les listes de définition. Karine warbesson 


O4 LES LISTES DE DÉFINITION 

(Ce type de He peu connu permet de formater automatiquement le mot à 
défi et sa déinion en appliquant es retraits nécessaires. La baise <> 
ii Lis introduit La ist de définition. La bals <> (Delnion Term) 
permet de mette en avant terme que l'on défi Landis quel blse <DD> 
COtiion Descition) set introduire La déinion Les balises «> et <DD> 
sont crphenes est à-due alles ne comportent pa de baies fermantes. 
Lisel 04] 

<a La baise HTML ser introduire tout code HTML dans une page Web 
20: Cette ble introduit en-tête de balise HTML fn de donner un rain 
nombre d'informations sur La page: description auteur, mats-cescutes el 
> Tout le tee visible est insbescuterbezcute: dons le corps de a page 
HTML 

Mes possible dmbriquer autant de stes que vous le souhaitez et de mélanger 
1e types de ses etre elles: données, non ordonnées, de définition. Vous 
pouvez sisi créer une ist ordonnée et y insérer à l'intérieur une ste à puce. 
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Valoriser un site web 
grâce au texte 


Avoir le bon mot est aussi important dans une discussion 
que sur la Toile. C'est en pensant séduction, technique et 
publication de qualité que vous séduirez vos visiteurs. 
A oi un portal où un maine, un aie lnteroet ans 2 ADOPTER UNE BASE LINE ÉVIDENTE 
Hgne éditoriae ne trouver aucun écho a n'arivers pas à . 


fidéliser ses visiteurs. C'est pourquoillfaut de a consistance, 
du propos et un cap à respecter 


TRESPECTER VOTRE LIGNE ÉDITORIALE 
Quels sont les valeurs 
simple brève. 


Tctualté de 
on. Un événement, quel au ot, 


Home ABONNEZ-VOUS 


match PSG- Bar 


4 PROUVER VOTRE TECHNIQUE 
Le protessonr 
és de marque ou en 


réigeant des art 


6 METTRE EN AVANT DES IMAGES 


Le contenue plus partagé sur Internet riestpas ete 


7 PUBLIER DES TITRES INTERROGATIFS 
es que on retrouve sur Titre ous fes us RSS doivent 

en quelques mots. Dans l'interrogation le “pour 
Vecteur 2 Gt sors Qu 


quelque chose 


tte élue ave son entourage 


LORDZ BIENTÔT SUR IPAD... #LORDZMAG aus 
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Valoriser un te ob grâce au tete 


fve 


Ca 


Un site vitrine sans une rubrique 
“news” n'intéressera vos 
L visiteurs qu'une seule fois. 
C'est pourquoi il est indispensable 
de traiter l'actualité dans ce lieu 
d'échanges. marc Fanetti-ista 


8 LISTER LES MOTS-CLÉS 


x cblgtorement apprendre quelque 
avec votre secteur act. Analyses Faculté 
ur es réseaux Gi 8 tes 


9 JOUER AVEC LES HYPERLIENS 
La capacité de remoyer vers d'autres pages Interne grâce à ce qu'on appelle 
Utises les autant que possibles ajoutent un pus votre 

Par exemple, lorsque vous cz un de vos produit 

re bouique, ou encore pour diriger le lecteur vers un de vos 


10 N'OUBLIER PAS LA PROXIMITÉ 
oubliée en ces temps de web communautaire 

ne entreprise. Soyez dans Fumeur la sédution, le easing 
chose arive mais vec finesse) rendez Léique votre 

Le tonte do tre expression de ces notions 


Tutoriel 


Intégrer les réseaux 
sociaux dans un site 


Tiveets 


# about 8 hours 290 The creators Daily is out! 
G® paperi/G_No/ceators » Top stories today via 
@ramsPorter @ 


#5 2ut13 hours 200 RT @Loriamag Vidéo : Pour 
G® LORDZ n°1 nous avons fait un road trip sur la 

Cite ouest de USA en Ford Mustang avec le 
Canon... http://.c/Ln06jISwké 


# bout 13 hours ago RT @Lordzmag Vidéo : 

6 BOOBA Jimmy Quand le meilleur vendeur de 
mp3 sur Tunes France offre un dip sans bling- 

bling et... http://.co/e0yKZITOKp 


W Follow 8 No 


Pour réseauter en un clic depuis votre 1 
home page, il est important d'y importer 

vos différents profils communautaires : 
Facebook, Twitter, Linkedin, etc. 


solution icône 


Ces plateformes s'appellent Twitter, 
Facebook ou Linkzdin. Nous allo 
expliquer ici comment intégrer 


6 Les widgets proposés par Viadeo 
sont intéressants pour les 


y professionnels. marc Fanett-sta 


éitear en cfpgr alteiteers Pa 
a bratsbeepe// 


nrtacebenco/gnolatisniré ><iag srenrhespe//Lattabir. 
aardelins.con/bagen/tacobeo Jpg" Al PaonbnO P></> 
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“intégrer les réseaux sociut dans uit 


ton “j'aime” de Facebook 


ns forme de lo, aime de 


Ain Le" tb=rot"></ivr<norfpe aron"heepi//ocanest- foot 


ut en, 05 /a1 1 jafapp1 82004002 526100 186 XER / 
sripotrlibe hreteheept//facabeohcon/ncm d'uti Later” 


monde false” Layouta"bor. count vidthe"150" ahou_ facons" fase” 
League LU 


Latin R&B sin 
msk using the 2. 
Web 2 escape 


CEE 
ur 
ee 
= 
ee 
Pre 
Ge 
Mn pere 
nome 


ae <= ant et = 


Book Magazines + 
LR. 
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(05 FR C3... 


Allez à adresse developers facebook comVocs/pugis/ depuis votre 


Pour intégrer vtr prfl Google+ sur votre at, faut copier et personnaliser 
page Facebook et écupére le code pour autoriser les commentaires des Le code du widget qui se trouve: tips: evelopers.google con + et 
tlisateur Facebook sur votre sie ou encore pour intégrer l'activité de votre bac. 

page Facebook (es publications). 


Ganges Ba 


06! [00 es 
re 


Les widgets proposés par Vide à l'URL suivante :tp//sociato box 
Allez sur vi lacebook com /ettingsPabefoloers pour activer wiadeacom sont ès intéressants pour des contacts proessomels Le 
abonnement à votre compte Facebook. Cela permet de faire cümnare votre widget" Apoh th Video" per pur exemple à un vieu de postuler ia 
compte personnel en autrisant accès publi ur puicalos de votre chat. 


son compte Video à une fre demplai publée sur votre ste. 
Ensuite lez sur developers facebook convocs/relerence plugins /oon/ 
pour récupérer le bouton “Follow et 'inégrer à votre ae. 
Follow Button — 


Viadeo Social Toolbox es 


(Gt Your Foi Burton Code 


= aus 0. 


Haut tre le intégrer Le réa sc de photos au de aime 

ur votre ste Ale a UD / buse iteresLcom ide Due” 

4 penonnasez vue code Vus our reproduire vos ur" ou 
Asset bleu ton” Di HE à vo Locations de hot pour 

bte lus audience. 

Linkedin 
urine es ant de Unkedi à votre sale sur 
dnlperinede couler 1 a par enemgie a Dossté pour vos 


laure se connecter à votre te viseur compte Linkedin et un bouton de 


= 
parlage pour partager Le contenu de votre site sur Link, 


Button and Widget Builder 


a no ge 


alsatia.fr 


Réalisée par Nicolas Schiff 


tué dans une petite ville alsacienne, l'Orchestre 
d'harmonie ALSATIA de Drusenheim (OHAD) s'est 
récemment doté d'une nouvelle vitrine. Ben ancré 
‘dans son époque. cet orchestre municipal composé 
d'une cinquantaine de musiciens disposait depuis 
Plusieurs années d'un site Internet, qui à récemment 
été remanié pour plus de modernité, de sbité et 
de fonctionnalité. La structure du site a entièrement 
été révisée : arborescence, mise en page, identité visuelle, ergonomie, 
respect des standards du web, 
À travers ce nouveau ste, les membres de l'association souhaitent 
transmettre les valeurs et la richesse d'un orchestre d'harmonie à un 
publie non rit, out en mettant à sa d'sposition les informations utiles 
au sujet de l'école de musique et le calendrier des concerts à venir. 


GG transmettre les valeurs 
et la richesse d'un orchestre 

y d'harmonie à 

un public non initié. 


Étude de cas 


Initiation 


Keegan Jones is a curious designer 
with a midvrestern heart. 


9 Foto Gen 


Thank You, Facebook 


Friday is my last day at Facebook. It's truly been a once-in-a- 
lifetime opportunity to work with such high-caliber people on a 
product used by a community of 1 billion. Since being at 
Facebook, I have learned a ton about mobile and product design. 
So much, in fact, that l'm going to print myself a PhD in design. (I 
never went to college.) Facebook is a special place, and l'm going 
to miss it. 1 have no doubt the future is bright, and the best days 


Valoriser un site web grâce 
aux réseaux sociaux 


Si avoir votre site Internet est aujourd'hui primordial, il existe 


d'autres moyens de vous faire connaître, d'augmenter votre vi 


et vos relations professionnelles, comme les réseaux sociaux. 


O1 DEVANCERLES TENDANCES 
Hs, Gowola tai le réseau noi de La géolocalisation, ajourus cest 
Foursquare, Tite à lsncé Vine, une élonnante application sous 105 
permettant de fimer en & secondes, et toutes Les marques 5 ire 
Restez au courant des nouveau réseaux, et indiquez à chaque 18 un logo 
ou une note précisant vtr compte dans ces nous avenues qui sont de 
wértabes sources de rfi pour votre ait. 


02 INTÉGRER LA PAGE FACEBOOK 
3 vous étes une marque ou un aise (photographe. webdesigner et), Là 
page Facebook est bligatoire. El nest pas pompeuse dans votre ca, le 
permet simplement de montrer vo rar à des mternautes qui ont déc 


de deven ans de votre œunre Mieux qu'une nest, vous aie pouvoir 
donner un nom à vos Rdles et les contacter directement si vous avez une 
annonce à fire. est donc indispensable de l'mporer dans la home page de 
voue ste 


O3 TWITTER 
Pntégrer sen compte Tatter dns son site professionnel, Cest prouver que l'on 
vi ave son temps. Aux USA, pas un employé ne le cache ef out le monde 
apprend donc à pur en 140 caractères dans ce sens. Nous autres Français 
prénoms le “pour vare heureux tons caché, mais Cest un leurre depuis 
Frrènement du ue 20! Osez donc vous montrer en sure vs POS 1 
en dérciat vos dflrentes passions Vous papnerez en pépuarié et donc en 


opportunités d'emploi 


04 LES COMMENTAIRES 
Ave un compte disquscom, vous allez 
sociaux dans vos commentaires. Qu int 
publications sur leurs différents 


O6INSTAGRAM 


inconnus qui se balade sur vos pages. 


GG Les réseaux sociaux ont pris 

une place importante dans 
LL] notre vie quotidienne et nous 
y faisons appel pour toute recherche 
d'informations. more Fanett-tsta 


Initiation 


Savoir réseauter 


08 ABONNEMENT FACEBOOK 
5 n'avez pas de page Facebook, nous vous comellons d'activer 

1e Facebook via facebook com/about/olon 

public en l'occurence ce qui concerne Votre 
ui dans notre ca, sera ouvert à tous le internautes. Eneite, placez un 
ie. Gsponibe ici develapersdaceb00k com / 


09 DRIBBBLE 
réseau social se destine à ous les graphistes. webdesaners, dévelonpeur, 
que vous publierez os Havas 
ares d'emploi Publerun in 
ste est gage de qua. Cela spi que 


Présentez-vous en réseaux sociaux ! 


Abonnement 


MAÎTRISEZ LA CRÉATION NUMÉRIQUE ! 


Photographie pour professionnels Web Design 


3D|CAO|DAO Création | Diffusion | Vidéo | Web 
Cinéma | Postproduction 


Offre lecteurs 


ABONNEZ-VOUS ! 


M NE MANQUEZ PLUS 
AUCUN NUMÉRO 


M RECEVEZ VOTRE MAGAZINE 
CHEZ VOUS OU AU BUREAU 


M BÉNÉFICIEZ D'UNE 
ÉCONOMIE IMPORTANTE 


BULLETIN D'ABONNEMENT 


réglement à l'adresse suivante : ORACOM / Abonnement 


1 Oui, je m'abonne à Advanced Creation 


Oui, je m'abonne à Photographie Facile. 


7 Le joins mon réglen 59 € pour 12 numéros, 


1 Oui, je m'abonne à Savoir Tout Faire en Photographie… 27 Je joins mon règlement de 35 € pou 


lement de 
1 Oui, je m'abonne à Web Design 2 numéros. 
pour 24 num 


11 Oui, je m'abonne à 3DMag 3 Le joins mon règlement de 40 € pour 6 numéros. 


1 Oui, je m'abonne à Movie Creation 1 Le joins mon règlement de 40 € pour 4 numéros. 
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sue [reve | ctemn name. 1. GX Me BA CAR © ee 


<ne 2 get_pear mana get 22e 30), sion page, 


gore para que HO), “aie pare 


2 qu gore natal quete 300. * munie pot 


Ar, au) Peas har ne 


rpm nee recto (pren FRPaR TAN Ce deMe Dal ren 
Drteetegierrretee) 


Appliquer oran un style 


Les feuilles de styles, également 
appelées CSS (Cascading Style TL 
Sheets), sont au web ce que et indiquez le code suivant entre le balises haut» et < ina, Dans cet exemple, 
les styles sont aux logiciels de 
traitement de texte. Appliquer 
localement des styles à vos pages 
constitue un gain de temps précieux. 


balise HTML 


1 votre site comporte peu de pages, 


Mon titre 
traditionnelle balise <font>, longtemps. 
utlisée en HTML pour définir police, 
taille et stle de texte, est délaissée au 
profit des feuilles de styles. 


[02] Définir des styles 


Les styles sont définis entre les balises «y et < sy. Vous pouvez 
dela même façon définir un style pour vos Rbleaux vos irages, etc. 

Le processus st chaque fois imlare : Vous Indiquez tout aborde 
nom de La balise. suivi d'une accolde ouvrante, puis vous déinisez les 
paramètres de st, sans oubir le point-virguieet vous ferme Faccolade. 


GG Associés à des balises HTML 
ou créés par l' 
les styles définissent la façon 
dont le navigateur présentera 
les éléments d'une page. xarine warbesson 


0e 
prete re 
re rl mare 
Re en pipe 
Re Tes 
RER en 


RIRE RCE 
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appliquer localement un se 


Simplement La définition de style déclaré das l'en-tête pour que La mise 
3 jour s'applique immédiatement à ensemble de La page. dem pour a tal, 
a couleur le sy Faignement, etc. 


[os PE 


wo souhaitez appliquer un style spécifique à une ne de tabou eus 
un en de votre page, a seule solution consiste à créer vo propres styles 
en ist appel à La élinition de casse. Créer des styles est pas plus 
ie que den modif. Chaque clase est formée ur le mode suivant + 


Lœuta neep-equivmrcontent-Type* contencreent/ntai 
(cnarsetmutt-#" /> 

étitierDeemnt sans nomc/tie1e 

sr eypenteet ess 


% opus 
ont-ramsaye Arias 
este: 4060000: 
tontmveiguer itaties 
cenatique Left: 


nes 


[06 ES 


ous airs créer une casse Cition. Toutes les cttions de a page stront 
rratées avec une pole Arial de 10 pois en no, avec un style algue 
tunagnement à gauche. Chaque nom d'auteur un sy gras test afché 
an ris mec une police Arial de B points Surle même principe est également 
créée une clsse Auteur, Ces définitions de cisses se placent dans l'en-tte 
detapage. 


Tutoriel 


1 présence dur soulignement ou cho La aile du tete Placez les ges 
antes dans Fen-tète de votre page HTML entre les balises be et 


I<rstienocumen sens nonc/titie> 
<SDILE cypenreext/css"> 


Link (vext-decoration: none: color: #CCO000) 
ressited [text-decoration: none: caler :#000000) 
active {text-decoretion: normal) 


have (eclor:#FF0000: fonc-veighe: normal) 
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Les codes couleur précédés dun dièse sont en hexadécimal mas vous 
pouvez inciquer Les noms de couleur en anglais, pr esemple 


Vous pue également compléter La tintin de ce style have par autres. 
instructions, par exemple 


Cd. ler les styles personnalisés dans la page 
Après avoir lin vos sys personnalisés pormés ina et mem 


ans l'en-tête de votre page, ceci doivent être appelés danse corps de 
votre page entre les balises cn et < 


[10] ppliquer Le style 


Pour appliquer votre ste, vous n'avez rien à are Insrez ke code 
correspondant à votre en à l'endroit souhaité sur votre page, entre les balises 
<a 8 Pop La seen forme sera automatiquement appliquée, dan 


Grâce aux feuls de styles, vous pouvez paramétrer défiiement 
l'apparence de vos liens, et même créer certains ets au survol dela sous. 
“Chaque ie correspond à un tt uen normal, alé. ct et survol. 
Vous pouvez tiger une couleur istinte pour chaque tt ber 


01 Diwwwgosquared.com/london2012 
02 02 www.springstudios.com 
03 03 wwwrothaniko.com/2 


04 04 wwwhanddrawnfont com 
05 05 wwwhealinghistories.org 
‘06 06 yan-studios.com/fashion 


Tutoriel 


Fe oi 

= 

1.2 

1 1 


GG En variant le nombre d'articles, 
vous donnerez une dynamique 
LL] à la page et éviterez l'effet 
monotone que l'on rencontre 
souvent dans les blogs. 1érémy Husser 


Tutoriel 


Réiser un log minimaliste 


Réaliser un blog minimaliste 


Ce tutoriel a un objectif : vous aider dans la réalisation graphique d'un blog basé 
sur la photographie afin d'en dégager une forte identité. Parfait pour les débutants. 


omme son nerm l'indique (web leg signifie journal 
de bord sur le web en anglais), un blog est censé 
contenir régulièrement de nouveaux billets, 'est- 
ârdire des notes ou des articles agglomérés au fl du 
temps sur un sujet donné. Pour La réalisation de notre blog, 
l'a ulisé une grille de 978 pixels afin de rester compatible 

sur les plus basses résolutions (1024 pixels), 
tout en restant suffisamment large pour les 
Plus hautes. Alin d'apporter une identité et une 


8 pie en 72 pi RVE et placez gril 
centre Double-cliquez ur calque background et aout une nerustaton 
de couleur. Entrez La valeur exacte hexadécimale FAFAFA qu correspond à un 
Flre> Bruit Ale de bruit, Matez une valeur de 2, toujours dns idée 
atténuer la luminosité et d'ajouter une Ir égreteture 


[02 


à 25 pris duhout Sélectionner 
Toute Lo Larpeur et le descendre à 

Le nombre de calques 6 ais mieux vous 
organiser, uses l'outil Sélection de tracé CA) et chquez-déplcez le trad en 
enfonçant La touche Ct/Cmd fin de le dupliques Piscez le 20 pes pus 
bas Ajoute le menu en 12 pres agé ur gauche 


TO 


esthétique lurweuse, j'ai choisi d'utiliser La typographie 
Joselin lab. Cette typo r'alourdit pas le chargement 

du site puisque c'est une Google Web ont (lagril et 
La font sont disponibles 

sur le CD). Je mets 
aussi à disposition 
le PSD afin que vous 
puissiez mieux étudié 
ma méthode de travail. 


surtout a arpur de 360 piels de haut. 
première mage en plaçant votre curseur au croisement des deux 

nant touche CIr/Cmd enfoncé, puis prenez 
ou Parme (P) que vous mettez en mode Trac (1), race le contour de 
objet. ae dans panneau Tracés (2) et fites un Cu/Cmd sure calue 
au de créer une sélection Rendez vous da le panneau Calques (3) et 
aouter un masque de son 


Eee: 


TO 


ge suivant forme de ja et aout un Flu 
es pour créer une ombre, Prenez out Pince avec une 
rédussesFOpacé à 5 t créez un et dégradé de sorte que 
A ausment apaque à base de objet et de mais en mous forte 


Tutoriel 


ose 


Utilisez outil Cercle vectoriel pour fre un rond de couleur A4 et de 
9 pixel. Ajoutez un contour extérieur de 1 pvl banc, puis une ombre terne, 
en suivant l'image du tutoriel Dupliquez le rond à ide de out Sélection 
de lac. Ce deux ronds correspondent aux images non alfihées dans La 
bannière Pour ajouter Le rond de image activée à sauf de dupiquer le 
algue en changeant couleur du rond et de le metre en nor 2000000 


06 


En avant pour La ration du contenu, À aide de out vectril Rectangl, 
placez forme de 642 plels à gauche de manière à ci qu'elle rentre entre 
es colonnes, Double-cliquez ur le calque, Jouez un contour mérieur de 
couleur Rdadoda et de pl anal qu'une lueur interne en suivant Les valeurs 
de l'image ci-contre. Cete technique permet de metre un double contour en 
8 créant mucun calque supplémentaire toujours dans Foptique organe au 
mu voir PSD) 


Écrtez photographe de article sur lee vectoriel Cele-c prendra 
es ft du calque vectoriel, c'est-à-dire le double contour Piscez le tete de 
manière à ne pas op encombver l'espace mis en essayant apporter une 
salue à La phato racer unrectangle de couleur TI en dessous du 
ext a réduisez Opacié à 80 %. Ce rectangle correspond à animation qu 
8 fer au passage de souris sur tie pour aire ressortir texte 


08 


Créez un bio de tete de La même laeur 1 pes en dessous remplissez 
Loi ges de faux texte Luiz de TAil pres en enlevant le Resa. 
Cette technique es souvent utisée dans les maquis pour des raisons 
esthétiques de ob 


[00 


Pace aux articles ur deur colonnes. L'idée est de pouvoir Hire varier le 
nombre darts, soi un so deux a ainsi dorer une dynamique à Le page 
Et éatr Felt monotone que Fo rencontre souvent dans les blogs. Utilisez La 
même technique que préchdemement pour eréer ces deux bios, À a suite 
rt possible d'autre nouveau un arte d'une coomne 


10 ne 


Passons à La parti de dre les usage de utliser pour mettre en avant 
Giérents moduies Nous commencerons par le module newsletter, 1rès sé 
our a filiation des utilsateurs Prenez fout Texte (D) créez un rectangle 
e quatre clonnes et mettez ke tete en alignement central ain que celui-ci 
ot placé au me Trez un trait 10 pes en desou 


[11 PE 


Placez les éléments en suivant l'image ci-contre. Le parti pris est de rest 
ririmaliste, sans ombre ni dégradé pour le champ core pour le bouton. 
Ce design est emprunté aux codes une mai fit aus parti des courants 


FH. remonter les twects 


En route pour deusième module. est intéressant pour les blogs de ire 
remonter ls Its pour compléter Fachualté Suivez Fétape 10 pour Le 
Vire du module À 20 ils en dessous ré un Care représantant Le logo 
blog Puis créez un bloc de tete à rot de tros ges en Anal pes 
6 pl d'iterignage, ce qui permet de garder toute La bat de 
Finlormation 


—— 


Troisième et derier module, Facebook Ce modue permet de montre er 
nombre de ans de La page Facebook du bg, mas surtout de vo qui de nos 
mise au, ce qu peut Eréerun ele enthousiasme auprès de lutisateur 
En restant dons le Lhème minimaliste désir s'agit de designer le Face 
ol phaginen épurant au mime 


A - 
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Réiser un log minimaliste 


Abordons La pagination Dares le but de metre en valeur chaque ati, idée 
es en ficher un nombre té par page. Le cho ia été de rer à 
uatre arcs par page. mas cela peut ler au-delà. Metz en gris cor 

€ mot Précédent” ain de ae comprendre à uliateu Qui nest pas 


AS ES 


Fiissons pare pe de page Cette parte, souvent inesthlque, permet avant 
Lout le référencement nalurel de votre blog en reprenant crains mots-clés 
Le menu et les ns sociaur. Dans cette maquette. le pied de pa se veut 
impoctant ali apporter du poid et une valeur ajoutée au design Créez un 
rectangle sur toute a Largeur de 15 pes de haute ajoutez une Incrustaion 
en dégrade. en suivant enemple L'objectif est d'apporter une ès légère 
Amière Convertissez le calque en objet dynamique : cc dr sur calque> 
Convert en objet dynamique Ajoutez du brut : itre> Bruit > Ajout de brut 


Dhiser les 978 piels en ro colonnes égales et donnez un ire à chaque 
conne. Le style a été repris des module de La parti droite mais en réduisant 

die datent, so 12 pes En dessous, remplisez les colonnes en suivant 
l'exemple en aignant à chaque os à pauche. Le it que les colonnes soient 
matériel représentées par best permet d'avoir des espaces Vides 
ren dérangeats To 


vs 


‘1Cads 


Ces 


body style=' mag: 


div id="’main_conten 
='font-fa1 


Se perfectionner 


94 initiation 104 rutoriel 
XHTML1,XHTML2,HTML5,CSS2 Réaliser une grille pour le RWD 
et CSS 3. Où en sommes-nous 


106 tutoriel 
96 tutoriel Créer votre menu 
Créer un player vidéo et une playlist avec Pageslide 
avec HTMLS et jQuery 


100 rutoriel 
Utiliser les sélecteurs 


DOdY style="margi ti 

div id=”main_ content” 

AT 
_ ctyle” 


Initiation 


5 XNTMLL.O,2.0,GSS 2 et 3, Où en sommes-nous 7 


HTML 4, 5, XHTML1.0, 2.0, 
CSS 2 et 3: où en sommes-nous ? 


Devons-nous encore utiliser les anciennes technologies pour concevoir 
des sites web qui fonctionnent partout, et par là-même perdre du 
temps en production pour régler les différents bugs ? Ou devons-nous 
proposer quelque chose de stable sur les navigateurs modernes en 
utilisant des solutions de secours pour les navigateurs à la traîne ? 


appol des fats.…. HTML 4, pratiquement mature dès. 

1998, este langage qui forme a base de L plupart 

despages webvisibles actuelles. Une os inalisé le 

W3C a poursuivit l'évolution du web en lançant un 

langage appelé XHTML .0.L'undesbuts de XHTML 

1.0 était de créer un langage de balises capable de 

s'étendre et de répondre aux besoins de nouvelles 

technologies par exemple, es dispositifs mobiles. 

XHTML LO devenant de plus en plus adapté et 

utlisé, le développement de XHTML 2.0 débuta s'appuyant sur XML. 

Cependant, ce langage pose plusieurs problèmes techniques, sans pour 
autant répondre aux besoins actuels des développeurs Web. 


LES PREMIÈRES IMPLÉMENTATIONS. 

En 2004, un groupe de personnes provenant des divers harinons des métiers 
du web, comme Opera, Mozil et Apple, ini qu'un groupe de développeurs 
Web frmètent une équipe indépendante appelée WHATVNG (Web Hypertest 
Apolaton Technology Woming Group). Leur mission, créer de meiteures 
spécihatons HTML pour produre de nouveau types 'apghctions web, 
Tout en respectant les navigateurs existants 

Le résultat : We Applications LO, qui etat les loctmaltés partagées 
par les navisteurs présents sur le marché, et produisent de nouveles 
Vonctiomaltés, par exemple des APL Ceci à sans doute sonné le sas pour 
XHTIAL 20 et at angine de l'évolution de HTML 4 O1 vers HTML 5. 

Le concept de Huile de stles, quant à li est présent des origine ds Von 
Wide Web Aus! Vol (1992) et Harmony (1993) recourent Sun mécanisme 
smile. Les premières implémentations HTML ne comportant pas 
éléments de présentation une pression croisant s'enerçai alor pour ue 
les navigateurs permettent aux auteurs de détermune eux-mêmes La me en 
orme des pages web Les CSS proposent une évolution du HTML en langage 
de présentation, que considéré comme Langage de structuration 


UNE CINQUANTAINE DE PROPRIÉTÉ. 

Une autre voie de développement est également ouvert à La même époque 

Le langage de transformation DSS6L des documents SGML, élaboré par James 
Clark suggère La possblité dun format de stles qui ne si pas seulement 
desc. et se rapproche Sun vétable langage de programmation. Cette 
vos est suive par Netscape, qu propose en 1996 au WAC les « IvaScrt 
Based Style ets» USSS).implémentée por Netscape Navigator d en 1997. 


En savoir plus 


GG Actuellement, les différents 
navigateurs modernes 
supportent un bon 

pourcentage des fonctionnalités 

HTMLS et CSS3, stephan Lemineur 


CSI est publiée le 17 décembre 1996, et définit une cinquantaine de 
propriétés. CSS} se défi comme un mécanisme de eue de styles simple 
A pet être alsément et cri iectement par 3 lsateurs our lle 
Les spéchietios, CSS est attribué en 1997 à un nouveau groupe de trail 
an sein du WC. CSS 2 est mis en place. Malheureusement, À fout ts vite 
déchante, Li computiblté entre navigateurs et à déclinaison par média 
et considérées comme des échecs, Les retours implémentation de CS52 
conduisent le groupe de avai CSS du WAC à rédiger à partir de 2001 une 
version rés CSS 21. 


POURCENTAGES D'UTILISATION 
Le développement da trosième niveau des elles de styes en cascade 
commence dès 1999, paralllement à ce de CSS 21. CSS3 devient 
“moduie, ain de tite se mises à jou, mas aussi on implémentation 
par des agents tilateurs ur Capwcts et aux besoins de plu en ph variés 
nageurs graphiques, navigateurs pour mobles, navigateurs voeu). Les 
avigateurs peuvent airsiimplémentr des sous-ensembles de CS53. 

Actulement, les dilérents nvigaleurs modernes supportent un bon 
pourcentage des fonctionnaités HTMLS et CSS3, mais d'anciens navigateurs 
comme ET et1EB requdrent toujours des solutions de substiution(avasc ri) 
pour permelire un afichage corect des mêmes ses web Les pourcentages 
utilatn toupur en baisse des anciens nnigaeurs et La propagationrapide 
de navgsteurs modemes comme Chrome me font afrmer que La solution de 
langages modernes (HTMALS et CS53) avec es solutions de corrects pour es 


none navigseurs et La sohion à privée 
Stéphan! 4 
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Créer un player vidéo et une 
playlist avec HTMLS et jQuery 


Apprenez à créer un player vidéo et une 
playlist avec HTML5 et jQuer: él 
directement dans la page des fichiers de 
type média sans pour autant 

utiliser des 

technologies 

autres (type 

Flash). 


Le player que vous allez apprendre à créer dans ce tutariel ser réalisé grâce 
Aa balise HTML «vin (grande nouveauté de La version HTMLS) mais 
également grâce à (Query et au plugin player Afin de réaliser fachement ce 
Tutoriel nous avons mi À votre sposion sur le CD-Rom fourni avec ce Ir 
Plusieurs fichiers vous permettant de suivre has facilement Les férentes 
apes de cet exercice (ere! de vous reporter au dossier orespondant). Si 
vous êtes pr, passez tout de suite à l'étape suivante 


[02 PC 


Pour entrer immédiatement dans levis. vous eve simplement 
rer var nier html Pour ce are, ouvrez votre éditeur HTML préféré 
comme Dresmueaver, PSPad ou Natepad» puis alz dans le menu Fiche 
Nouveau et sélectionnez comme type de cer Mn. Pour ire anale. 
enregistrez ds à présent votre chier en le nommant inde Mn (pour 
Pouvoir vous y rerourer plus clement je vous conseil de créer un 
nouveau dossier Tutriel Payer HTMLS- afin y enregistrer votre fichier). 


(03 FES 


Vérifiez que code source apparait bien à écran et que votre Logiciel se 
{uouve bien en mode édition de code source) Si vous avez des ges de code 
HTML afichéos à écran, sélectionnez es puis uporimez les toutes Can de 
pouvoir créer un hier type HTMLS). En ligne L commencez par décuarer ke 
Aype de vore document: « taoc7mE a puis, juste en dessous. La langue 
tie ur La page: chou Lanp=" tr (oubliez ps de refermer en gra 3 
la baie <hnai»).Enin, ajoutez à l'intérieur Les balises cho et <o Pour 

in, ajoutez à l'en-te de La page les bises «mm re 227 81 
cuite, Voice code que vous devriez bte 


La version HTMLS vous permet de sectoriser es contenus de votre page 
Internet grèce à ble <aceiee 

Les contenus publiés l'intérieur de cette balise peuvent être pri 
indépendamment du reste de la page Cette bals sera par exemple 
parlement adaohée pour insérer un article, ou encore une “nes” sur un 
log ou le commentaire dun internaute Retournez don dans ke code source 
de votre fichier HTML puis décarz une baie act», Vol code 
source ajouter Ce vous rappelle ul faut le metre à l'intérieur des balises 
<str) 


OS 


Pour compléter cette balise, soute à intérieur La las vGalery, puis ID 
videogaley Ces deux paramètres permettront de sys le bc contenant 
Le player ais surtout de pouvoir jour sur les balises qui se trouvent à 
l'intérieur, grâce à JavaScript. Voici balise que vous devriez obtenir das 
etre chier HTML. 
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Créer player vidéo et ue play 


[06 


A intérieur de a baise artoue, vus alle ajouter les vidéos grâce à une 
balise <a et à une baise ciao Cave intérieur une balise <aours) 
Passez quelques ignes entre La balise «asie, puis éclrez une balise 
<s dansaguele vous jouterez une clss Volae Vous jouterez 
également a proprité datarimg quest simplement l'image de preview de 
13 déo Voie code source ajouter vtr fichier Html les images de 
prenew sont dsponbles sur le CD-Rom) 


(07 


Retournez dans votre hier HTML puis ajoute dans La baise ci 
précédemment crée a propriété data description qui permet tout 
simplement de her une descrition à ue vidéo cette description pouvant être 
teste, un te ou une image, Voici dessous le code source is à 
eur ( compléter danse fichier ines-hmi) 


GG De nombreuses parties du 
player et de la playlist seront 
stylisées grâce à la feuille 

de styles fournie par défaut dans 

le plug-in vplayer. sutien Deboue 


08 TT 


A intérieur de La baise <a», passez une ou dut ges puis déclarez une 
nouvel bas «van. Cette nouvel base HTMLS permet douter 

dans une page interet classique une vidéo qui sea coupée à un layer. À 
Fintéreur de cette base, écrivez simplement Controle prelood" qui permet 
de écharpe La vidéo dés Le chargement de La page. Voile code ainsi mis à 
our ans votre fer HTML. 


CIS 


Four compléter La balise <raôm, vous allez ajouter à l'intérieur La baise 
are qu permet de délit emplacement du fichier vidéo à lie lors du 
char base «vin. Das cat baise ajoutez La proprié ar (Qui 
lit La source du che). type (ai élit le type de vidéc), et ein comes 
au dt le code à uliser pour ie L vidéo). Voie code soute à ajouter 
à votre fer HTML 


Lol 


Afin de compter 1 plait. vous allez simglement copie koler plusieurs 
il baise ca vous souhaiter afficher des vidéos diférentes, vous 
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devez simplement modifier a balise <= (et tout paricuñèrement 
Ftinbut arc). Enin, pour modifier apparence, vous devez mode les 
buts davance pion ane 
“ediy clame vplaper” data-doecriptioo"éiag ares"10g/ 
pétiel_th. jpg" ciasesrimgbloek"/><h>LA guerre des boutonse/ 
Hapdpde Yann Sammuele/p>" data-Lag="g/aor- 37 
<vito controle prend 
<acures srrrmaties/La guerre. des boto0s-opé" 
eypervideo near codecne'anez A2EDIE, ma. 40-277/> 
hide 
«ss 
iv ctasservplayer® data-dsscripeiens"<iag ares tag) 
moriel_eh: pa" clan imgbleck"/><h2>Thorc/R2> pd Haroeth 
Branaghe/p>" data-dage"Ang/mov2Jpn"> 
vides controls prend > 
<aaurce pron'movies/Thor_otielaL_ raider mp4" 
pes rvideo mer onde" ave AZEOIE, ml 40. 2772 


ide 
ae 

118% vidéos 

Four pouver créer ce cas pratique clement, ous avons ajouté dans ke 


{CD-Rom les fichiers vidéo. Copiez les doslers /moves tm présents sur 
Le CD-Rom vers votre dsier de programmation ( a racine, à té de votre 
Fichier index mb La structure HTML est maintenant terminée. est ph 
que temps de passer au CS! 


La_guerre_des 


Thor_official_trail 
boutons er 


Dons ce es pratique. nous ulsons un script permettant de générer 
paper et La playlist. Ben sr, vous devrez légèrement es modifier (CSS et 
JawaSc ip, mais Le script es de rès bone qualité. Rendez-vous sur cette 
page: ip/Æodecanyon net/item/hmiS-bue-video-pallery/122632 


: FD... 


Puis télécharge le 
fichier Le ééchargement 
tie réglement dune 
rémunération pour 
l'auteur du sept). 
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Allez maintenant dans votre dossier de aval puis créez un nouveau dossier 
Ing eu dossier 7. Ensuite ue ose fichier Héléchargé, ouvrez archive 
et places les fichiers vai dans Le dossier ja/ ete er vlayercss 


Inclure les fichi 
os es chers pacs dans Les iférents dossier, vous ve ajouter 
Les bases permettant dincure es chers Ava dans le ficher Index. 
ri. Pour ce lave, retourner das code source de votre fichier HTML puis 
autez les ges suivantes Es permettent d'inclure es chers query. 
voayeris et enfin valve After à L sul une nouvel inclusion, cette 
Vos-6 pr a ui de tjs du playe Voile code source à der etre es 
bases hesder de votre fer HTHAL. 

<asript types ten/Javaseripe” arortheape//ajat 


secheripes 
<ncripe typenttaxt/Javancripe" arcs videogel lery/VasLlerY; 
sec /neripr 
“éllnh reterotplentants eypenr tent ons 


hretervidnogaliery/ 
vplayer.ess* > 


feuille de styles 
Patournez dans votre éditeur HTML puis créer un nouveau fichier CSS (menu 
Feher> Nouveau) Enregistrez le drectement dons le desier contenant 

var eier index him Ensuite, créez une ason entre les deux chers 
Kutisez aire dessous que vou plcerez dans len-ète devotre hier 
HTML sot etre les bases «on 

ik hrefe-seylessons® rele"styleshoot: Eperttext/0087> 


Styles géné: 


Rendez-vous maintenant dans votre fui de sys ain d'ajouter vos 
rembres pres de code. Tout en haut de vtr fiche, écrivez "25 

Ps, des les scotades, définissez La plc title des caractères. 1 
Fa des marges intérieure et extéreure, et enfin a couleur fond de La 
age Pour ce lave vos utéerez Les propriétés font famih color. margin, 
Badge Backgrourdeoer Voie code que vous devriez bte 


Nauiez pas de ester votre chier HTML ain de véifer que a feuille de 
styles es bien prise en compte. 
Bo 4 

£out-taniiyr Hoiveticn, Arial, Verdanss 

Lont-airertens 

marino 

padsingtDs 

Pnchground-color Atos; 


De nombreuses parties du player et de a pays seront styisées grâce à 
a eue de styles fournie par défaut das le plug-in vplyer 1 sera done 
inutile de les inventer mais simplement de les mode Pour cela deux 
souions possibles: sot exporter ls classes dans votre nouvelle fui de 
styles, so modier drectement a feuie de styles de vpayer ! La première 
ape consiste don à ouvre fichier players et à dent La las 
aideogallery qui vous permet de maire conteneur gba supprimez tous 
es styles de cete casse) Pour commence, manier amplement L couleur 
du fond par calle-cl:#273727. 

sidaogalery { 

back graundecoloe 19737373 
; 


[18 PA page le player 2/2 


Utilisez maintenant les propriétés CS53 pour définurune bordure de 2 p, 
soi couleur #000 (border) Ajoutez une ombre prtée ave les valeurs 
alignement vertical et horizontal, tale: 20 ps couter air ox-shadow). 
Enfin, régler L poslion à relie (postion).  argeur à 640 pres (mi). 
marge du haut 150 pins (margimtop) at enfin les marges ére et gauche 
auto (margislef et margin rh). Voile code source C5 ainsi mé jour 
émogallery ( 

Baekground-color 19373737; 

border 12px soLLA #00 

oxeshadon0gx Vox 20p4 40003 

ponitlonteelattve} 

videhrétoper 


margin-tepr150pn; 
margin-Latratos 
marin-riahe tutos 


58. ous lez personnaliser lettre et a description 
de chaque vidéo Pour ces tetes vous avez ti les bases 7 ep Écrivez 
donc dans vore hier CSS h2 Lt "(3 Enfin, is es propriétés 
CSS pour modiir couleur du text cc avec une tie de 9 em pour 
Le re, #91B688 avec une tale de 17 em pour le paragraphe. Itilez à 0 
Les marges intérieur texture (padding et margin) Voile code CSS à 
ajouter votre fichier 

Cr 

colo rtetetets 

padingtos 

marsinin, 

Lont-a12010, ent 

; 


et 
color1#3i8ete; 
padtingtos 
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Créerun player vidéo et ue play 


acsinio 
Lore-4126:0,7e 


[20 A 


Vous devez modifier es éléments de La plait, chaque vidéo étant 
présente dans un pet bc portant La las navigation Thumb, Retournez 
dans le code source de a full de styles vpayercss et identifie a las 
“navigation Trumb Supprimer l'ensemble des styles puis utilisez les propités 
CSS3 ai de défi une marge intérieure du haut à 10 plels padding op). 
pus La auteur à 80 pes (he). Voice code source ainsi obtenu 

nariqatioermab( 

adting-toprlOpns 

Daisies Bopar 

; 


GG De nombreuses parties du 
player et de la playlist seront 
stylisées grâce à la feuille 

de styles fournie par défaut dans 

le plug-in vplayer. suuien vevove 
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MasiezL couleur du lond 191919 (background -cle) créez une bordure 
de 1 po, sad back (border). mosiiez La position en absolute (posion) et 
placez ke bc en hat et à gauche (op ete à D x) puis mod le curseur 
Carson) Pour terminer, ajoutez un dégradé dans Jon (por les navigateurs 
Le supportant) en commençant ar La couleur #282828 vers 191918. 

ravi gstLoerhmbt 

bschproundi 41919194 

Bord ipu OLA #00 

position à aiaotute) 

Late à per 

eus 

urser 1 pointer: 

Incgromnds “mos-Lnase-gradlent(top, 282628 0, 4191919 
200: 

Bacgroundi -mabkit-gradient (linear, Left top, 1efe botte, 

Een 8}, eeoe-atep{1000, 1929191) à 
» 


22 


Pour que couleur change au passage de La souris, Vous suffit d'ajouter 
la suite du nom de La class -hover Ans pour modifier Le dégradé lorsque 
Fintermaute passe La souris sure dessus une Vidéo ous écrire das votre 
feu de styles : navigation Trumbhover { et ajouerez dans les ccolades 
Les ss à applique ll 1 agi de notre dégradé modifiez les couleurs 
AS55SSS vers 2272727 ei le code CSS à ajouter à votre full de styles 

cnrigationrhatonee À 

bsckgronnds 45586554 

Background -aos-Linaur-gradient{top, 4855855 01 


rar) 


chgronnds -ambkie-gradlent( linear, Left top, 1efe bottcn, 
célat-aroplot, 538885), colot=atopt1008,/272727))à 


: * 
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Cibler les éléments des pages 
avec les sélecteurs 


Apprenez à cibler de manière précise 
les éléments de vos pages Web afin de 
les styler en CSS en découvrant 

étape par étape les sélecteurs 

de CSS 21 
etcss3, 
souvent trop 
peu utilisés. 


es sélecteurs sont à Ia base du langage CSS. En effet, ls 


travers d'exemples 
notamment à cibler de 


on de sa position 
parent, ajouter du contenu décoratif, où même 
éléments. Enfin, nous terminerons par es sélecteurs 
pa de Formulaire. 


[01 es 


Ce sont les sélecteurs Les plus ts. Le 
lecteur de balises permet de sélectionner 
l'ensemble des ments de mème type, comme 
lie} Qu { Le sélecteur hiérarchique 
{lespace) permet de sélectionner un élément 
contenu dans un autre : un enfant. Par exemple, 
Aie pl.) section les paragraphes Ce) 
contenus dans une au Le sélecteur mule 
{irgue) permet de sectionner plusieurs types 
éléments tels que hi ,n2 234 
an 
“Premier paragraphec/p> 
<proeutiine paragraphe! 
</meson> 
<a 
<prroialine paragraghec/p> 


ET 


le premier ot deux 
paragraghe #4 

colo! danpaylue 

; 


Premier paragraphe 
Second paragraphe 


Troisième paragraphe 


[02] 


le class 
En HTML les tribut 4 et can permettent de 
nommer ou de regrouper des olaes Ltiriut 
ses nique ar page alors que tribut 
peut tre ik plusieurs fi. existe donc 
deux électeurs CSS pour ler précsäment 
ce déments Pour ler un La nous tlsons le 
hièse(e) Pour cibler ne class, este point 
Ain menu … cb l'élément de a page dont 
dem”, À um} ble le ou les éléments 
de La page dont can um ef ce quel que st 
leur type. 

“pPronder paragraphec/p 
<e Lérelertecond paragraghes/p 


lecteurs d'id 


vent 
colors deppinks 
; 


Premier paragraphe 


Second paragraphe 


[03 


avancés CSS2.1 
Les secteurs ancés en CSS21 sont sélecteur 
d'adiacence drecte (:) ete sélecteur d'enfant 
ect (5) Ana ke secteur section 
Félément qui sui rectement un dément ete 
secteur: channels enfant de premier 
ieau uniquement En prenant le même code 
HTML que dans 'enemgle Les possede 
er précisément chaque paragraphe 
iv» pl 
Je D p qui mit une divs Le 
erottine 
coiort dopaiyhiaes 
; 
aie» pi 
Je Un p entame direct de dvi Le 
prier p %/ 
oser deeppiahs 
; 


Premier paragraphe 
Second paragraphe 


Trois 


ème paragraphe 


[04 Fe 


Les psaude classes permettent de cer un 
lent HTML préci sans pour autant que cel 
ne sot matériaisé sémantiquement dans le 
code source. En CSS21 dense que ès peu de 
peut -clses amples. La lus usée est 1» 
2h qui permet de cbr premier ennt d'un 
lent. devient done the de e ter sn 
apoliquer dattibuts HTML. comme dans cette 
ste à puces 
ab 
ariretoet/14> 
<bencme/16> 
<imtarene Esplorerc 185 
state 
Dqparec/1 
«hs 


1 Hutrse-ct14( 
esiors crise 


+ Firefox 

+ Chrome 

+ Internet Explorer 
+ Safari 

+ Opéra 
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Cible les éléments des pages avec les séecteurs 


Les pseuderclsses dynamiques sont ajoutées 
ur certains éléments de La page orseurune 
interaction se produit. C'est le cas de 1v2n1ens 
qui sélectionne es lies que l'nteraute a déjà 
és, de snover quislecionne l'élément 
actuellement urvlé par a souris de Lo 
ui ble élément qui le Hocus (lien, champ 
Ge lormudar) et de rase qui sélectionne 
l'élément actuellement cliqué (avec ke bouton de 
Là souris enoncé). 

ac 

colert blues 


sieutvel 
<olert red 
; 


GG Le module des 
sélecteurs CSS3 
y est reconnu par 
tous les navigateurs 
actuels. Il est temps 
de se mettre à les 
utiliser ! vincent De otiveira 


[06 PR 


Les pseudréléments permttent de cibler une 
pari d'un élément HTML, sans pour autant 
ue celle-ci sot matéralisée sémantiquement 
ans le code source En CSS 21 le peeudo 
émet are be La première 
etre d'un élément tandis que le pseudo 
élément te be La première Hgne. Un 
exemple cassique 'utisation et La réalisation 
Sue ettrne 

<pGmes est un paragraphe 


+ 


pateat-letter( 
Bees 1er 
tont-ntoes Jen 
coleer crangeres 
ÿ 


ci estun paragraphe de 
plusieurs lignes lorem ipsum 
dolor sit amet, consectetur 
adispiscing el. 
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Ci. pseudo-éléments safter 


ettbefore 
Les pseudoléments rar et ibatore 
permetent douter du contenu décoratif à 
chaque élément ls s'utiisent conjointement avec 
La propriété content et sant en aspays sains 


éléments HTML sugplémentares. ls peuvent. 
également ser à afficher La valeur Su attiut 
Ace a fonction avt 


(Qu uniquement lors du survol ou du focus 


Ceci est un lien vers un moteur de 
recherche MF TERTEAN qui 
esttrès utilisé! 


CA. sélecteurs d'attributs 
1 


Les sélecteursdattrbuts peuvent dre utlisés 
pour cibler es léments HTML en fonction 
eleurs attributs C'est en quelque sorte une 
itenslo des électeurs et de sas puisqu'il 
es possble de cibler nimperte quel attribut et 
même de le cibler en encion de sa voleur! Four 
cela. leste os vriontes 

Lau qui ble les héments dont attribut 
eur est présent 

= Laterervai= qu ble les dément ayant 
Fattbut acer ga à a; 

= atueavai qui le les déments dont 
attribut aus a une valeur égale à va (danse 
cas des casses multiples par exemple). 

Les dataratrbutes de HTMLS purent éalement 
étecbiés. 


(09 PERS 


La secteur d'acjacene ndrte en CSS3 et le 
ide (Ce sélecteur fonctionne sensiblement de 
La méme façon quel sélecteur sauf quille 
Vous les éléments qu suivent et pas uniquement 
Le avant, Tous les éléments frères qui suivent 
sant done sélectionnés 


GG Les pseudo-classes permettent de cibler 

un élément HTML précis, sans pour 
LL] autant que celui-ci soit matérialisé 
sémantiquement dans le code source. vincent pe otiveira 


Premier paragraphe 
Second paragraphe 


Troisième paragraphe 


[10 PS 


En CSS3, de nouveaux secteurs d'arts font 
leur apparition Cela permet nolamyment un lus 


grand contrôle sur a valeur de ces arts. 
La spéciaton en définit plusieurs, mas 
intéressors-nous à os entre eur. 


at mr Gb les éléments dont La valeur de 


Fattrbut commence par al: 
= utero) ble les dément dont valeur 
de atriut Fit par val: 
= jatert=rai) ble les léments dont a valeur 
de attribut contient val 


- Titre article 18 

+ Titre article 4 
Titre rubrique 26 
+ Titre article 11 


Et — csss 


De La même laçon quest possible de cibler le 
premier enfant un élément, en CE53 sa 
cha permet de sélectionner le dernier 
entant. De plus, deux nouvelles pseudo 
asses permettent de be es premiers et 
derniers enfants en fonction de leurs types ce 
Bon rcut-ot-type et rampe 


Titre de la page 


Premier paragraphe 
Second paragraphe 


[12 ECS 


child 
La pseudo-lase ane-c 4} va encore pus 
oc pursqu'ell permet de cibler un ou phtieurs 
éléments en fonction de eur potion au sein 
de leurs parents sans pour autant qu ce st 
Le premier ou le dernier Par exemple, na 
1 Gblele raïsième enfant De plus, 
cat pseudo-clase accepte une notation sous 
La forme sux-cht ant). Dans ce cas pour 
chaque valeur entire de supérieure ou égale 
à 0 les ment dont indices correspondent 
aux résuats sont sélectionnés. 
Prenoes une ste à pures de dx éléments ete 
CSS suivant 

Dex Arena) CE 


cbés! 


Toi pseudo-classes supplémentaires 
Lonclionent sure mème principe que sn 
huit) vue précédemment 

= mxh=ot-typat ble les éléments dun certain 
one; 

= snth-dase-sht ai cl les dément en 
partant de La in ls indices sont inversé); 

= mh-last-otrypet 1 ble es déments d'un 
cartin type, en partant de in. 


do-classes d'enfants 


{Une possibilité est également offerte pour cer 
Les éléments qui sont enfants uniques, est 
re qu'ont pas d'éléments Pères La praudo- 
lasse coniy-ant a ble un ment seul'enfant 
de son parent ea pseudo-casse sony" 
be ur élément seul enfant de son parent mais. 
dun type donné. La pseudo-clase rep permet 
même de sélectionner un lémant que contient 
aucun enfant. Voici par exemple plusieurs Istes 

A puces, dont une seule ne content qu'un seul 
entont 


dur autre élément précédé du dise (2) 


La pseudo classe sage per als de 
slectionne l'élément ersqu st a ble un 
en Cette pseudrclsse devient active lrsque 
Fiisateur dique srl ben. 


de clan, tirs et de pseudo-ciasses). Vic 
quelques exempte 

 divinon. otal ble les ééments ai qui ont 
pas cime: 

“a 14 anse ihover Cle es lens non 
survol dans une ste à puces 

Let not ia} be es champs input 
que sont pos inactis 


Troisième paragraphe 
Quatrième paragraphe 
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ile les éléments des pages avec les séecteurs 


[17 RS en css3 


ny a pas de pseuderéléments supplémentaires 
en CSS3 Par conte L natation a êté modifiée 
lin de marquera diférence d'avec les pseudo 
casses. La notation st donc passée de simple 
depot (:) à double deur-paits (1). 

Les pseudéléments sont do. 1 
Lette, refest-Line, be ts af. 
Cette syntane es de aimons supportée por es 
navigateurs À tester en fonction de votre cible. 


[18 d'état des champs 
formulaire 

En emo ve isa css 

sis mu core tome 

Tasse ones emae que 

rt 

“a het han oct nt 

cepmr prete 

“she hp clement cos 

an do eodemet ste 


IMCheckbox 1 
ECheckbox 2 
MCheckbox 3 


GG Les sélecteurs 


d'attributs 
LL] peuvent être 
utilisés pour cibler 
les éléments HTML 
en fonction de leurs 
attributs, vincent pe otiveira 


x 
Es 
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Réaliser une grille 


pour le RWD 


Découvrez quelles sont les bonnes 
pratiques pour rendre votre site 
responsive webdesign (RWD) et les 
erreurs ordinaires à éviter à tout prix. 


1 variété des terminaux qui permettent d'accéder au web 
implique que vous ayez une véritable réflexion en amont de 
lséréationde votresite.L'objcct!duresponsive webdesipnest 
ainsi de couvrir avec la même base HTML tous les terminaux 
possibles, C'est alors le CSS et le JavaScript qui permettent 
l'adaptation. Pour cela nous nous pencherons tout d'abord sur 

deux contraintes techniques pour comprendre d'une part 
une spécificité des mobiles le viempart et d'autre part 
ce qui permet l'adaptablité du ste: les media queries. 
Ensuite, nous établrons les points de viglance pour structurer notre site 
quel que soit le média d'accès. 


Ales souvent pas nécessaire de toucher tous les périohériques mas tt 
de concentrer vote travail sur certaines files écrans de différentes 
réseltions Si le but duresporse werden et de s'adapter ous les 
supperts, rares sont ls iles qui ne es ctégorisent us pour ne sadapler 
ul majorité d'entre ceux avutisent leurs isteurs Habituellement. 2ont 
considérés rs gabarits cdinateur (de 900 à 1500 pins), tablette orientée 
patrie 900 à 600 pirels) et smartphone (en dessous de 600 pie 


02 er 


Le sewport est une résolution simule d'écran Le rendu de a page web est 
lors pas fonction de La résoution réelle de écran mais de cell du vient 
La règle du rwport veut que 1 pie CSS corresponde à pre viewport au 
eu de 1 pa d'écran Vous pouvez ais prévoir Le rendu de votre aile moble 
sk en taie réel, so en flat une résolution simule adaptée à votre 
ein Pour régler ce paramètre, vou uiierez une méabalise HTML (rébe 
par Apple) ou vempor dans le CSS (norme WC). 


(03 PT 


Les media quenes sont Les prapiéés qui permettent de spi usage 
de tele ou tel fut de styles son Le média de destination Latlut 
media permet depuis HTIMLS/CSS3 de régler par rapport à a tail de 
écran (sion), de a endtre (wi) où par rapport a résolution 
Ce réglage peut tre fai par apport une tail exacte ou vs-d-1s dun 
extrème, minimum ou marimum. Depuis HTMLS/CSS3 1 est aussi possble 
de cumuler plusieurs règles avec “and, "ony "et "n0t 
Dors le HTML 
<Llak cele-stylemant- matlanrscren and (nant 
étre" heat maliscreen.css" types"tert/cas" > 
“<i-— appelle La fouille de styles mulisereen.cas = 
Ou dans le CSS 
Hsadin screen and (maudit 6t0pe) 4 
cost 4 
asia 
3 
} 
11 cote propriété ve n'applique que ni L'écran ait moins 
de Az de Large 97 


04 


La tal du média de conneion implique souvent une navigation spécifique 
En ef les ailes les plus larges correspondent généralement à une 
navigation au clavier et à La souris alors que les écrans plus petits sont 
majrairement tactiles. faut donc prévoir que utilisateur en pus avoir 
un espace visible esrein, ne pourra pas interagir avec votre sie web aus 
aisément. Les boutons doivent donc dre pensés plus gros et mans nombre. 
La navigation doit être carie par d'autres moyens que les ets au survol 
Les champs  remplr dent tre rés aumumum (voue remplacés ar 
des listes déroulantes). 


Ces 


Au centre du be des usages, a bypagraphie dot tre le cour de votre te 
Web de a conception à sa réalisation Dès La conception de vos interfaces, 
vous devez prendre en compte sl de vos pacs pour vous assure 
dela compréhensblté de vos contenus. Ce choix de leur tale et de leur 
orme dit prendre en compte deux facteurs: une part La tance de 
lecture c'est-à-dire a distance entre écran et ls veus de l'ile ; outre 
par a résolution de éran el donc La ifférence possible etre les tas pat 


[06] Hiérarchiser l'information 
Rs cnn arte 
nn rm 
dns ana 
Rae 
MR nr Er 
orties 


(07 PP 


La cure nest ps la mère selon le périphérique qu vous tie: 
La structure de l'information est don agiquement différente aus Ans. 
Les contenus mobiles sont out en hauteur et ent de haut en bas alors 
quels plus grandes argeurs permettent une lecture lus proche de celle 
de imprimé Ce Z ou en F salon La poslion des images et menus) 


108 PEER 


Le déplacement de contenus implique que toutes vos informations sent 
dhsbesen blocs cohérents vec une anne cire Cette structure va vous 
permet de déplacer les blocs indépendamment ls uns des autres et donc. 
selon le média utlié, de choisir lesquels afichr et selon quelle organisation. 
Vous lez à pat de à construire différentes gris en fonction des gabarits 
deréférence que vous avez chaisi et placer vos bocssur cs gris On are 
lors de gril dyranique Cependant, pour tre vraiment adaptable, votre 
rl doi ausi être ide, c'est-à-dire construite en loalité ou en partie 

en pourcentages et non € pre pere 


(00 


La vraie filé de La fluidité réside dans Les marges et espacements qui 
doivent grandi pour garantir l'ération du contenu sans tautelos Laisser 
apparaitre de top grands blancs dans votre page Vous faudra donc mére 
ne media query ap4cifque pour ce problème, permettant ur spaces 

de s'agrandh avec La page sans La Vider” Pensez aussi au fait que, selon 

e média, a proportion de banc supportée sans que a page at ir ide 
rest pas mème. 
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Réaiser ane gril pour le RD 


10 ere 

La response webdesign ne at pas out, et vaut souvent mieux construire 
des versions séparés les Iterctons sur le te sont riches préférer 

Le responsive design peur un sie majoritairement inormatil Cependant, 
lexistence de peurs ses ou applications fait note de nouvelles 
problématiques, en particulier call du partage d'un mauvais" en. y 

aura toujours des tilsateurs qui accéderont à vos contenus par une Voie 
déournée ou inhabituelle Fensez den à intégrer une méthode pour parvenir 
à un design de conteru adapté au média. 


2 maregenes (portrait and Landscape) 1 
media only screen and (min-ideh + 32073) and (marée 
ane À 
2 ses 21 
» 


1e marines (iandocage) 21 
Honda cniy scene and (mini à 321P4) ( 
1e seles 


AG) and ierientation à Landscape) À 
De sien 
» 


9 pe (ORNE) mme #1 
nds œniy soroen ac (milan à 76) and (max à 
Ga4pu and lorlentation + portrait) { 
1 Betas 


fe Large account > 0 
Pmmdia cniy screen and (mén-xideh à 1824pn) { 

1e sien 7 

; 

Ve home à 0 2 

Boni Guy 9er een and Mn a-Gavice- pi) =ratA 


1.3), œy sers and (ain-deoe-plaelratie à 125) 
Je es #4 


x 


Tutoriel 


Œ 


Créer votre menu avec 


PageSlide 


Apprenez avec PageSlide, le plug-in 
le plus populaire de jQuery, 

à placer le menu de navigation 
dans un volet 
glissant, pour 


eResponsive Webdesign permet avecunseuletunique fichier 
HTMLet des adaptations CSS deconstruireune page-ayantun 
rendu adapté pourlesdifférents écrans :PC, tablette, mobiles. 
De nombreuses techniques et astuces apportent des slutions 
à ces problématiques. L'une des plus ingénieuses est de placer 
le menu de navigation dans un volet glissant. Dés lors, suffit 

de cliquer sur un bouton, souvent symbolisé par trois 
Tigneshorirontales t situé en haut gauche du sie, pour 
déployer at replier le menu, Largement répandus par 


le déployer Facebook, des plugins JvaSertrprennent aujourdhui ce pipe 
à Pour nets tir nous serons plain Que pus populaire 
et le replier. ES 


106 


Récupérer les fichiers 


jQuery 


Tutoriel 


nu avec Page 


GG Les plug-ins JavaScript 
reprennent aujourd'hui le 

y principe de Facebook qui 

déploie et replie le menu. aurétien aries 
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08 EE 


Maintenant que Les fichiers indispensables au bon fonctionnement du lui 


sont en place, nous ls erer les rs de aviation pis donner ur peu de 
style à lou ça. Dans index him tpez le code suivant juste près << 


oo) Styliser le 


De retour dans style. distance le tive du menu avec Ligne suivante 3 
 margbtebottens 30 phxela } Donnez aussi du style à vos es en tapant 
Le code suvant 


Et ialement, ajoutez un état de survol à vs lens en tapant ceci: home | 
pasieyt «7. Anaysons un peues lines précédentes 


mnt 


[10] Analy: style 


Pt que de donner un die plis aux es, Îlest préférable de leur 
atbuer une leur en pourcentage Comme notre sie est Responsie. 
faut que La tal des lens puise évoluer Nous aurions pu prévoir des les 
Intermduires à laide de media queries avec difrents points de ruoture, 
mais en réa, c'est pourcentage qui confère La plus grande souplesse 
un st response. Îlest donc conselé autant que possible de défi vos 
largeurs, padiing et marin de côtés en pourcentages Gardez toujours 

en te qu'un site Response bien a, est un site qur a le moins de Egnes 
de code de media queries. Maintenant, iminuez ou augmentez La Largeur 
de votre fenêtre pourvoir comment s'adaptent ls boutons du menu. 


Navigation principale 


{Supprimer Ia barre de scroll horizontale 
Lorsque vous imiouez La Largeur de var sie, vous remarquez qu'une 
Barre de sol horiontale appara en bas de page. La largeur de body est 
(de 100% Or celle-ci a aussi un padding de 1O pires de cé. Le width total 
de body est donc de :100% + 0 pis +10 pie. On dépasse donc de 

20 pie, et lorsqu'on passe sous 960 pirels, La fenère n'es plus 552 
arande pour tout aicher laut done modifier body et exprimer son pad 
en pourcentage. Modifiez dans body ces deux tribut comme sui: width 
Je padding 50 piels 2. 


[12 FES 
rene 
versions mobiles. 1 va donc falloir appliquer une media query. À la fin de style. 
Er 


Dors cette ge s'applquernt tous es styles donc la largeur d'écran est 
supérieur 35 em so eméron 560 pres (3 x 16 prels). Pour que les media 
queries soient réelement effectives sur kes mobiles, laut ajouter dans La 
als chant del page une line enseignant le Viewpor. Insérez donc 
Ligne suivante 


[13 FES du menu 
Pour re disparaître Le menu de a version mob, ajoutez das votre CSS, 
ste avant les media queries La igne suante: men { Gala Ro} 
Puis. pour le fire apparalre sur les écrans dont La Largeur st supérieure 
1338 em mir votre med query comme suit 


Aurretez et niruez Largeur de votre navigateur pour voir le menu 
apparaître et dsparire. 


otre men désormais ivisble sur petits écrans, dot activer à ide 
Gun bouton Pour pouvoë lou, ajoutez dns La balise <hmañar> de otre 
fichier HTML Laine sua: clame "opun hear" 
Pour communique avec JavaScript, ajoutez à La alice uv attribut 
Avant Lan" je N'est consellé de ire commencer le nom de ID 
ar je lin de toujours 5 rapeler qu ceui-i est nécessaire au bon 
fonctionnement du JavaScript et qu'a aucune vocation ststique. 


6 Comme notre site est 
Responsive, il faut 
que la taille des liens 

puisse évoluer. aurétien Aries 
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(4 Notre menu, invisible sur petits 
écrans, doit s'activer à l'aide 

Æ d'un bouton; ce bouton ne 

eee devant être visible que dans les 

er navigateurs mobiles. aurétien Aries 


Propaiide cm à (Diet non dloplar Bey dé 100 
<Slees Ars border-bortent À plsels 20114 4000) bo-madout 
© à pimsis 0 #58; order-radlust 0} Background nonsy Lort= 
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KRYPTONITÉ 


Tester + Publier + Référencer 


Tester + Publier + Référencer 


112 initiation 120 Tutoriel 


122 initiation 
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PE EL LL 


CSS Validation Service 


paradresse URI par chargement de Ficnier 


Validation par adresse URI 
Sasiser fesse URI du document (TL mc CSS. où CSS au) vider 


par Saisie Directe 


Adresse: 


» Options supplémentaires 


p Te BG vlats are host on ser tecmogy donat y HP. and upporte y com in 
(] ES 


EM WG os a beta rlose fa ne sance rod ou ana valdalon report on our 
InkiLnou to quick iderëfy ose porbons of Your web site Ina may benefit from attention, 


Tester votre site sur 
différents navigateurs 

Le moteur de rendu des navigateurs web étant sensiblement différent 
d'un éditeur à l'autre, il est parfois délicat de rendre votre site 


web compatible avec tous. C'est pourquoi il faut savoir pourquoi 
et comment contrôler votre site sur différents navigateurs. 


est souvent trés frustrant de constater que le rendu de votre 
te web est totalement compatible avec Chrome et pas du 
tout avec Internet Explorer. Pourtant. il s'agit à d'un combat 
que les développeurs et intégrateurs mènent depuis déjà de 
nombreuses années, 


LES ENJEUX DE LA COMPATIBILITÉ ENTRE 

NAVIGATEURS 

Comme dans tous confits, 1 y à des enjeux à différents niveau. 
En elle, este à ce joue ing navigateurs web principaux, à avoir : Frelon, 
Chrome, Saar, Opera Internet Esplorer le plus caricieut d'etre eur) Étant 
on le nombre is important d'uiiateurs ranpuant quohéhennement 2 
La Toile para délicat imposer à tous utiliser un seul et même uti. C'est 
Pourquei À es indispensable pour pouvoir communiquer avec une maté 
interautes de porter une attention particulière à a compaté entre Les 
navigateur 
Imaginez que vous possédez une boutique e-commerce et que vous souhaitez 
<blrun miam de prospects pour aire La premoton de vos praduts Que 


ont penser les vasteurs tilant interet Explorer ct quelle image auront de 
vous il rendu de votre site est comoltement Sésorganisé sur ce navigateur 2 
(Ou, pire encore. si ces mêmes visteurs ne peuvent pas accéder à l'achat de 
vo produits à cause du problème d'alfichage des boutons permettant ajout 
Gun produit eur panier ? 

La réponse est simple, cel serai catastrophique pour votre image, mas 
également pour votre che 'afires ! Ain de mur saisir La parlée des. 
égts que ca pourrait ac je vous te consiter le ché de réparti 
de 'tisation des navigateurs das le monde. 


POURQUOI DE TELLES DIFFÉRENCES DE RENDU 

Vous demander La raison pour lquelle 1 enite de leles différences 
interprétation entre Les navigateurs est déjà un pas en avant Vers une 
eue coma de votre ae cb Les d'lérences de rendu puent tre 
(dues au type de maviteur, mais également au système exploitation usé 
parle icteu. 

Les noyaux des nageurs web présentent des variations et notamment celui 
ist Explorer vs-dis des autres navigateurs existants. Les versions 


trill 


interet Explorer les plus problématiques pour les intérateurs sont es 
versions 6 1 7. Mème si heureusement les statiques montrent que ces 
deux nipaeurs sont de moins en mois utilés, fut lol de même ver 
A rendre votre site compatible car leur ulisaton es aujours présente surtout 
au niveau des entreprises. 

Haut 3 rembmorr les débuts du World Wide Web et 'appuriion du Langage 
HTML au début des années 90 pour comprendre les raisons de loutes es 
dilérences entre les navigateurs. Le langage n'étant alors pes encore irès 
développé, l'apparition de quelques navigateurs web avait entrainé a mise 
en place dune multitude de nouvelles balises pour étendre le périmètre 
dutlisation du HTML, En 1994, le WC dt fondé ai de régles langages 
bel metre en place des standards utisatin, Cest à partir de ce moment 
que le langage HTML va évoluer avec lappartion du CSS et de nouvelles 
normes. Des concepteurs tek que Microsoft se névellent et décident de sortir 
leur propre navigateur avec un moteur de rend qu leur st propre L'évolution 
des lechnoloies étant aus rapide que nous la connaissons aujourd hu. de 
nouvelles spécilations sont done sortes réfuihèrement et à alu y capter 
pour pouvar Les interpréter Les navigateurs ont donc évalué. mais chacun de 
eur té et à des vitesses ben dérentes, ce qu à eu pour conséquence une 
ronde diversité au niveau du rendu 


LES OUTILS ET TECHNIQUES POUR TESTER LA 
COMPATIBILITÉ 

Nous sommes à présent sans doute ious d'accord sur l'importance que 
présente La compatibilité dun dite web sur les lents nageurs web 
Encore laut savoir quels nt les technique et outis à adopter pur vie 
si votre site et conforme sur chaque natateur 

Iya pncipalement deux techniques possibles: usage de series en ge qui 


BROWSER 


Web Design Gallery 
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Tester votre at sur iférets navi£nteus 


2 chargeront d'effectuer une capture de votre site surL version du avigateur 
que vous choisirez, ou le passage par l'installation des navigateurs sur votre 
sistème sachant que cela comportera quelques contraintes et vous ablgera 
308 dote à installer une machine virtuel afin émuler d'autres systèmes 
espotation que le vôtre 


Voici quelques out qui vous aideront à tester compatibilité de votre site 
Des 

bronsershots org, service gratuit el complet vous proposant des captures 
écran de votre sie web 
“lunascape navigateur web embarquant ris moleurs de rendu difrents 
= my-debughat com ar Teste/HomePage. célèbre testeur sur diférentes 
versions interet Explore: 


Brice Zossi 


Les conseils pour générer 
un minimum de bugs 


MEN que none ren Fe oons Vects 


Icon Search Engine 
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Mettre en ligne sous WordPress 


Dans ce tutoriel, vous allez apprendre à See = de tu de = ere 

Arc en no de maine Nous empoirons une 
transférer votre site local sous WordPress nn 
(version 3.5) vers un site distant. Si vous lier pour vs tes Mr Pres qua que soi 
n'avez pas peur de pénétrer dans les fichiers A M Re ee 
sources et de manipuler une base de “twentyeleven”.Avantdecommencer sauvegardez 


# j votre base de données (étape Où de ce tu 
données, alors ce tutoriel est fait pour VOUS. one éesiermordpres. 2 


Commengons par ous rendre sure île OVH Cliquez sur onglet Web 
puis sur Hébergement mutuasé Choisissez votre formule (1 lermude perso 
3125 Go est suffisante pour démare). Poursuivez en enseignant votre nom 
de domaine et finaliser votre commande Vous recevres ve coordonnées FTP 
par email fin de mate votre ste en ge va un oc FTP. 


Tutoriel 


Mettre en Here un te WorgPress 


\étrer FileZilla 

Télécharge gratuitement FieZia depuis le ie of FleZil permet 
de transrer vos ces en local vers un hébergement en le pr simple 
Bisser-déposer de droite site local) à puche (sie distant). Enrez Vos 
coordonnées FTP dans FleZila peur ÿ renseigner l'hôte, identiant, le 
rot de passe et port (par délaut 2 1 vous ne matter ren) puis ciquez 
au Connexion rapide” 


= 


Dors FleZ3a, vous remurquerez apparition de fichiers dans La partie de 
auch site distant), qui confie que vous êtes bien connecté au serveur 
en bgne Repérez le dossier WWW dans lequel se trouvera votre al 
WordPress Supprime tous es chers qui 5 trouvent dans ce dossier 
et créer un que vous nommer “st. 


[04 PR 


Bande vous ur Pak Admin en cal Sélectionnez L be de données 
dust à exporte. Ciquez sur ange "Exporter" pus validez sans rien 
eharger Récupérez le chier sl énéré et matt le de côté pour l'instant. 


OS: 


Rendez vous sur le manager OVH et connectez-vous à cette dresse 
Cr oi com/managena/) Cliquez sur onglet "Hébergement", “Gestion 
SQL puis sur “Nouvel base” Choisissez le type, renseignez le nom de 
tre base puis validez. Avant de poursuivre attendez de recevoir par e-mail 
es informations MYSQL et confmation qu votre base de données. 


ns 
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[07 a le fichier wp-config.php 


Rendez-vous dans votre WordPress local À aie, te ave votre ogcel 
de programmation le chier “wpconfi php". Remplacez Le nom de base 
de données le mat de passe et adresse de hébergement MYSQL parles 
coordonnées de La base de données fournie par OVH 


08 EE 
ne 
M ner 
Det 


sur table wp-options” pour masir a colonne “option lue” du champ 
“eur Remplcez rURL déjà présente par l'adresse du lee ie, 
ubiez pas de pointer 'URL vers le sous-desler “sie” en ajoutant A" 
fin de votre nom de domaine pis validez. 


[10] tégiages de Ia partie admin de WordPress 
Connectez-vous à admin WordPress de votre te en ge (notre 
note domaine /ste/wp-adrun) Dans l'onglet “Réglages” puis dors 
“Général, modifiez Le champ "Adresse web du ie (URL en écrivant URL. 
de votre se sans eat”, Enregistrez es modifications. 


(LÉSECES 
a 
dr rar 
Pate te 
ere 


EE 


p 
ous alors maintenant permettre aux intermautes de vor Le site drectement 
en tapant seuhement le nom de domaine dns La Barre d'adresse sans le. 
“te” Revenez dans FeZil et lits un copie coller du fichier de. 
php” (situé à La racine de WordPress) sur votre bureau Éditez et modiez 

Le chemin d'accès aus Envoyez et placez le ficher mod racine 
dudosser WWW 


[1355 


Poux finaier vtre instalation, décochez option Demander aux moteurs 
de recherche de ne pas inderer ca site” dans l'abri WordPress (onglet 

“Réglages” puis "Lecture ) ain que le ste soi vb pour les moteurs de 
recherche Nine vous reste pus qu'à communiquer adresse de votre te. 


Maïssoum Aboudrare x 


Galerie 


# 
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Choisir et utiliser un client FTP 
Transférer des fichiers sur un serveur web, publier des images en ligne afin 
de les partager avec vos proches ou bien encore stocker des documents 


en ligne afin de disposer d'une sauvegarde de secours de vos documents 
importants sont autant de possibilités offertes sur le web. 


Un logiciel FTP (File Transfer Protocol) permet 
de transférer des documents issus de votre 
ordinateurversleserveurwebdevotre . 
Ce protocole de communication est dédié à 
l'échange de fichiers sur un réseau. 1 permet. 
‘depuis un ordinateur, de copier des fichiers vers 
un autre ordinateur du réseau, d'administrer un 
site web, ou encore de supprimer ou de modifier 

des fichiers sur ce ordinateur. 

Que vous souhaitez sauvegarder des documents au mettre à jour 

votre site web, le logiciel FTP deviendra rapidement incontournable. 


avez far app à une spphcation autonome. Des chats FTP sont 
disponibles sous Windows, Linux et Mac OS X. 

Via un moteur de recherche, vous en trouverez une multitude à 
télécharger gratuits ou payants. Nous allons voir ensemble comment 
bien chosi et utiliser un logiciel FTP. 


Dee Lane age Vontet vne t ? Mot ee pm 


OR Dre ren 


UNE INTERFACE EN DEUX VOLETS 
Quelque so ciel FTP cho, chacun fonctionne de manie similaire. Lors 
du anstet FTP l'ntertae est généralement visée en deux volets diet. 
À gauche 22 trouve l'arborescence des dosierslocaur, C'est-à-dire és sur 
are ondnateur, et à dre l'arborescence des dossiers distants, ss chez 
vatre hébergeur Généralement, le ie distant comporte un répertoire vo 
as lequel apparait arborescence du se. 

(ln de transférer des documents de votre ndinateur vers un ste distant, et 
inversement. à sui de gsser-désosr les documents d'un dossier à l'aire 
Enbas de l'interface apparait le d'attente, ù furent les documents esta 

3 envoyer ete temos de transtert estimé. 


(TRANSFÉRER VOS FICHIERS 

Al e transtérer vos fers vers votre serveur web, vous devrez mentionner 
Les informations nécessaires pour vous connecter via un opel FTP. Ces 
informations sont couramment appelées codes FTP par votre hébergeur 1 
vous Dermettont ls mi en he de votre ait web ainsi que le Iranser de 
Fichiers. À ide de ces informations, vous all pouvoir configurer votre cent 


mu rt nm Cr] 
ES Se mopnrneeniens 


Sn 
Fan ie Taie 266 ur 


da mes 
prerestesret te 


Linerace classique dun cent FTP, visée en deux parties À gauche es Fier en local, à droite ls ciers ponbles sure serveur cb. 


GG Certains logiciels de création de 

sites web incluent un logiciel 
LL] FTP, c'est par exemple le cas 
de Dreamweaver. rarine warvesson 


FTP. Ces codes se présentent énéralement de a façon suivante 
Serveur Hp: Rpvetredomaine com 

Login ou utilisateur: votrelgin 

Mot de passe 

Vous accéderez ensuite à une arborescence de dosiers Par défaut se trouve 
répertoire wir C'est intérieur de ce répertoire que vou devrez créer V3 
esse et ransérer Les fichiers de votre ait web 

(Généralement. lorsque vous avez créé un te web en local sur votre oxénater, 
vous daposez dun certain nombre de dossiers (mages, vidéos, ec) et de 
fichiers. est primordial de respecte l'arborescence de ces dossiers et fichiers 
pour publ votre le web Dans le cas contraire, ous Les Ben pointant vers 
es pages de votre te mas aussi vers vos images ne fonctionneront plus. 


SAUVEGARDER ET STOCKER DES FICHIERS 
Si lotion principale du cent FTP reste a publication de Bees pour 
le we est également souvent utilisé pour le stoctage et Lo sauvegarde 
de données. En cas de problème avec vote ordinateur, vous disposerez 
ainsi de sauvegardes, qui auront de plus Favantage tre access à tout 
moment et depuis importe quel arcinaleur connecté à Interne. st bien 
sûr particulièrement important que nt esp reste sécurisé en conservant 
attentivement vs informations 


Karine Warbesson 
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Ghost ter un lient FTP 


taste, 


Ce) (_æ 
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La eomenion àun serveur FTP nécessite un nom de serveur un identifant et un mat de passe 
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LA solution FTP gratuite 


FileZilla 


FileZilla : Télécharger en français 


FileZillaest un client FTP 


Un loge re qui vous permet de charger où Ménager ls Réers sur Un serveur. Par 
erempl es ments de vote 528 web chez ou Gepus voire hébergeur À posséde une 
mierace usateu: g'aprque ruse Rapde et labe. FlezEa est praut el mutlpallorne 
P onctonne sur lot système deptotation, Supporte puseurs Ypes de comen chenl FTP. 
FTPS el SFTP (mode normai ou sécurmé) iapensatle à ous Ceux qu pérenl un se Web ou 


TELECHARGEZ FILEZILLA 
emsagent de are 


DOWNLOAD 
Puble cibe : webmasters, blogueurs, graphistes et itégrateurs web 


Configurer un logiciel FTP 


Transférer des fichiers sur votre serveur web Éthique manette) 
permet de rendre votre site visible par Sans am 
tous. Cette opération 
s'effectue par le biais " 
d'un logiciel FTP qui San ac Pan pan et 
permet d'envoyer Frans ta ou dafanbesr e ED 
et de télécharger 
des fichiers de manière sécurisée. [02 ES 
RE eut Aa Le re 
SL De arnaud du one ee 
O1 mr ns sie 
DRE A DCR Met RIR Red PaLue Anti ba Bees RO ml ds 
nement 


FleZll permet afcher simultanément Farbgrescence de dossiers de vor 
ordinateur at celle de votre serveur ed. 
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03 Fe 
À droite apparaît l'arborescence de votre serveur distant, qui correspond 
men 


semblable à l'explorateur Windews. Un le sur u dossier permet 'afcher 
son contenu juste en dessous. 
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Cotigurer un oct FTP 


0 
tn 
pr 
nr pe 
nee 


(05 PERRET 
Spéciz adresse hôte du serveur commençant par p./ fournie par 
Volre hébergeur Indiquez le gi ee mot depasse d'accès Indiquez 
Arentullment emplacement en local des Fer de votre se purs validez 
Soyez pariulèrement précis sde l'entrée de ces informations et vellez 


aurespect del casse (majuseules/minuscules), Clquez sure bouton 
Connexion. 


rotmesen: 


de votre st pus cliquez sur OK en bas de l'écran. 


Bee bons Have rene dpi! 
Genoa de CR 
pt comen cute ne Gonna de 
Dry amer 
Pom Long cmew 
ERREES 
pores poamees 
ation cou déton 

Que 


Transférer les fichiers vers le serveur wob 
Lancez L connexion au serveur sant Faites un glisser -déposer des 
fiers en local vers votre sie. La mise à jour se Fait alors sure serveur 
stat | En langage FTP. vous avez “upload” es cher, c'est-à-dire 
envoyt des chers de vdre ordinateur vers votre serveur Généralement, 


Is de publication 'un sie web les dossiers doivent étre placés dns. 
1 répertoire 


Cette fendtre est importante pour vérifier le bon fonctionnement de 
os tirs. El st constiée de oi onglets Fichiers en fe d'attente, 
Transfert échouts et Transfert réussis. Le premier onglet vous indique 


Factin en cours, tandis que les deux autres vous informent en ca d'erreur 
ou imerse, de réussie de otre transe 


Des: 
rome: 
cœeu 


EE 
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La navgationinttive et organisée de 
Naden permet de se isser Huidee 


Le référencement social, ou SMO (pour Social Media Optimization), se 
distingue du référencement traditionnel. I laisse de côté l'aspect fortement 
technique de ce dernier pour se concentrer sur la pertinence du contenu 

et des liens. L'astuce technique cède la place à l'astuce sémantique. 


remière étape du référencement social : les réseaux 
soclaux eux-mêmes. C'est une évidence, et nous en 
avons déjà parlé dans ces colonnes mais les réseaux 
chénéficientd'untelréférencementauilparait 
ser lorsqu'on gère une boutique 
en ligne. Qu'il s'agisse de Twitter ou Facebook, ils 
bénéficient d'un SEO (Search Engine Optimisation) 
sans équivalent, non seulement de parleur nature, mas aussi 
parce que Google, étalon ultime en termes de référencement, 
tient compte. de l'importance du facteur “social” de ces entités: 
Parexemple, Google s'appuie surlenambre depagesquiontététweetées 
etretweetées Celles-cijouissent donc d'une melleure visibilité danses. 
résultats naturel. Delaméme façon, lanotoriété'unutisateur Ttter 
ou Facebook lui permet d'être mieux classé dans L recherche en temps. 
réel. Un facteur non négligeable d'attractiité. 


PINTEREST, LA COQUELUCHE 
D'autres résemaocautse partieurisent pareur capacité à créer rapidement 
et fiacement des backlinks, à les organiser et à les partager Le plus connu 
est elclous, qui s'appuie sur système de mots-clés pour générer un pur de 
Mens el qui a donnnaïsance à nombre équivalents pus ou mens effcaes 
eburéquentés Arétons nous un instant sure onctionnaités de interest 
Dernière coqueluche du Web, même 11 à quelque peine à are a place 
en France, Pinterest sprend le parce de decous en le comptant par 


un système de vignettes qui permet de visuser un contenu image du sie 
rétérencé Le nom lustre ren loncionnalité dust on “épingle des tes 
orme on le ferait sur un mcodbond. L'espace principal de Piterest est 
ailes appelé “boat, à bon esclent, et peut justement être utlisé dns ce 
sens at contribuer à éréer une atmosphère pénéral attractive, pour peu Qu'on 
signe L pertinence de ses sélections 

La pre se révèle plus mantageux pour une boutique que pour nimporte 
quel autre ste ou blog puisqu'il fr La possibité de présenter dectement 
un prod et de le présenter dans un contente de “pins” étudié, de regrouper 
ce pins pr catégories, de les partager sur son propre band (ep), sur 
Facebook où Tate ou encore insre code aur son il ou lo 

Les e-shops jouissent aussi dune lonction qu semble presque conçue pour 
tes puise donne la possibité d'associer un prix à une photo et de a 
rélrencer dans le moteur de recherche des 1. 1 est done possible de 
proposer un aride à La vente directement dans ses rlérences interet 
Attention cependant. user de cette lonction peut rapidement faire passer Le 
détenteur du prof Pere! pour un spammeur sans verpogne. 


LES SITES ET BLOGS À FORTE AFFLUENCE 

Le référencement soc peut ire complété et renforcé par une présence sur 
Les tes dont les hens s'échangent volontiers su Les résaaux s0cux. 1 et 
important de quantifier unratioafuence/pertinence pour pas communiquer 
à ché de a ble Cris ses à forte fréquentation se spécaisent ds a 
pbhction de contenu lé au design, qu s'agisse de design graphique ou 


Indexation, slité, cité d'utilisation. buzz. lintérét de Piterest 
est uns rehaussé para posibté de personnaliser les URL, comme 
celui de Lydia Marceau du og Nest Trend (estrend com). 


La fonction Ga de interest ravira es commençant. 


GG !! est important de quantifier 
un ratio affluence/pertinence, 

LL] pour ne pas communiquer 

à côté de la cible. rnivaut norer 


produit, d'architecture ou encore dat Le contenu présenté est généralement 
letionné, ce qui parait une Hotte tract auprès du pub ouvert au 
sansbiltés du se où blog, 

Le ste notco org est un encllnt exemple de ces ts qu rassemblent des 
canres dimért s'arcuant autour du design. Sa mise en page. qui erplote 
les vgneltes, renforce latracthité du site et la valté des réérences 
présentées. On y louve ple-mble de La photographe, du design gran que. 
de architecture, des produits marchands, de La ve, des évènements Ca 
Mode difluences diverses mais ciblées permet de croiser les pubs et de 
respecte une pertinence qui véhicule un sentiment pobal de qua. 

Après re inscrit, chacun est ère de soumetre un en, us er objet une 
letion avant que décision so prise de le publier Cest un principe qui 
permet de se dégager de obligation de passer par un rédacteur fie au se 
et donne sa chance à quiconque sour respecier l'essence de nent 

Par alurs, le sie se décine en plusieurs autres sfes, et rotamment 
noteouture, qui se focale sur habilement at les accessoires de mode. et 
répondra aur attentes en termes de vaiité des coméepteuru vendeurs de 
élements et ares professions Bées à La made. 

Paden.net est un autre site au design contemporain, qu met accent sur une 
navigation soignée sous forme de pop-up actables depuis un menu défiant 
orizéntal. La recherche et La visité y sont mains perinentes que ur notet 
mais l'iterace donne envie de se lisser guider de prendre son temps pour 
S'arrter sur le contenu, ou d'ouvrir ke pop-up de La shop pour y décor La 
Sletion de produit proposée par le ste 
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Qu'est-ce que le référencement sci ? 


Nocotcom le page d'accuel du se, permet d'afcher 
les références par centre d'itért. 1 tout ce qui 58 porte 
Crearable) 


= || | FO RÈM 


Rester créati 


ares, dispose de comptes 
comoibtent leur capacité en 
Fermes de rélrncement 200 


Galerie 


BIGTOP = 


O1 wwwthekennedys:nl 
2 thegraphicalweb.com/meet-css 
03 www gearmodels.com 


Galerie 
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SHIRTS FOR À 
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07 cinema-series-orangefr/evenement/universeries/en 10 threzdsnotdead com 
08 wwwmuziekparknl/#/home 1 wmyenog 
09 helvetitec.com/tee 12 pop-the-box.com 
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Des outils pour débuter 


Les balises HTML4 


Les propiétés CSS2 / CSS3 


Vidéos et livres 


Lexique 


Ressources 


Ressources 


Des outils web indispensables 
pour débuter 


Dans cet article, nous allons découvrir ensemble une multitude de 
ressources pour le webdesigner débutant, disponibles un peu partout sur 
le web. Que ce soit les typographies ou les couleurs, ces outils et ces sites 
vous offriront une aide précieuse dans votre travail. Florian Jamois 


ler est un formidable nuancier communautaire en ligne 
développépar Adobe Cetoutilpuissantofirelapossibiité 
de générer une palette de couleurs harmonieuses à 
partir d'une seule couleur, d'une photo ou encore d'un 
mot-clé. Kuler est ainsi capable de vous préciser les teintes 
qui s'accordent le mieux entre elles selon le principe du cercle 
chromatique. Chaque palette générée sur le site vient compléter 
l'immense base de données de Kuler. Un système de classement 
par nole et par popularité nous informe des dernières palettes 
tendance. Une inscription gratuite vous permettra d'enregistrer 
vos propres palettes, deles partager ouencore de mettre favoris 
vos préférées 
http: dob 


SUBTLE PATTERNS 


€ site de Subtle Patterns offre un choiximportant de motifs. 
Travailés sous forme de carré, ces motifs sont répétables 
à l'infini sans aucune marque de jonction. lis sant donc 
paraitement utilisables pour une image de fond. Sobres, 


texturés ou colorés, ces motifs diverses et variés conviendront à: 
modeme. Ces motifs sont: 


tous les styles, du plus ancien au ph 
disponibles au format PNG et sont directement utilisables dès leur 
téléchargement. Aucune inscription au sie n'est requise 

hp. 


Subllepatterns.com 


960 GRID SYSTEM 


60 Grid System est un site qui propose en 
téléchargement plusieurs grilles pour vos 
webdesigns.afind'accélérerlaphasedeprototypage 
d'ergonomie de vos sites. Basées sur une largeur 

de 960 px, ces grilles se divisent en 12 ou 16 colonnes 

égales séparées par des lignes de 20 px. Elles offrent une 
base ordonnée, et permettent de définir rapidement la 
structure principale de votre webdesign. Disponibles pour 

Photoshop, GIMP, Flash, InDesign, Illustrator ou encore en 

HTML / CSS, ces grilles vous faciliteront la vie à chaque 

projet 

»htp 
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néapensabes pour débuter 


FONT SQUIRREL 


ont Squirrel est un site qui propose un catalogue 

de typographies gratuites, même pour un usage 

commercial, Disponible en format .otf et/ou .tf, ce 

site offre un choix important, mais surtout un choix 
de qualité. Les typographies sont souvent disponibles en 
plusieurs graisses afin de faciliter leur utilisation, Font 
Squirrel propose également un outil permettant de générer 
des kits font-face pour la plupart des typographies. Classé 
par familles et par mots-clés, le catalogue est rapidement 
accessible. Un onglet répertorie les typographie les plus 
populaires, tandis qu'un second affiche les plus récentes. 


Source Sans Pro AaBbC<DdEeFIGEHNI 


Source Code Pro Aa8bCcDdEe 


aBbC<DdEeFFGgHhii) 


oBbC<DdEeFGgHhIK 


GG Font Squirrel est un site qui 


propose un catalogue de 
LL] typographie gratuite, même 
Pour un usage commercial, rtorian jamois 


DOWNLOAD button) 
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ICON SWEETS 2 


je set d'icônes réalisé par Yummygum, compl 
élégant, propose pas moins d'un millier d'icônes 
vectorisées au design simple et épuré onible 
gratuitement en formatPSD, les icônes ont été 


32x3 
sont facilement mos 


es dans 3 tailles : 16 x 16 
Les effets comme 

sous Photoshop £ 
d'une vingtaine de sujets divers traités, chi 
icône répond: 
whttp/icon 


ant à ses besoins 


SQUELETTOR 


quelettor n 
S: tion deson doctypé 
choisir entre plusieurs pa 


alement possible dé 


ou l'encodage. Il est personnaliser 
directement depuis le site le nom de votre fichier CSS et la 
langue utilist ications détaillées sont associées à 
chaque paramètre et permettent de 


leur intérêt. Une fois le squele 
code directement dans 


continuer à développer le reste du proje 


toner els 


»ttp-/alsacreations:com/page 
alsacréation: LA Œ w 
Cons Lane Le Le Lo] a 
samesr —_ 
= “ 


: LOREM PIXEL 


orem Pixel tire son nom du célèbre faux-texte latin 
em ipsum. Utilisé à l'origine en imprimerie, ce 
te latin sans signification particulière, permet de 


aille la mise en page d'un document sans avoir les 


m Pixel reprend le même principe que 
en l'adaptant aux images. Ce site offre un 
disponibles dans n'importe quelle 
20 x 1920 pixels I est également possible de 

mage en 


Ç 


KNACSS 


SS est une feuille de styles CSS minimaliste et 
encer une intégration, 
et CSS et un framework 
ur ofrir 


n web. Avec 
constantes, KNACSS 
s d'éléments, des grilles 


€ et des conventior 


permetde faciliter les position t 


e en page de façon simple et intuitive. Livré sous forme 
r CSS, ce praje 


pages et est c 


mple ichie installe très simplement au 


ible avec t 


les navigateurs, 


même mobiles. 


an | Use est un merveilleux site qui répertorie toutes 
les compatibilités des navigateurs dans des tableaux 
détaillés, attribut par attribut. Toutes les versions des 
navigateurs sont référencées, ainsi que les préfixes 
à utiliser pour implémenter correctement les attributs 
compatibles. Cet outil permet de déterminer concrètement 
Si oui ou non vous pouvez utiliser tel ou tel effet en CSS3 
dans tel ou tel navigateur. 
whtip/aniusecom 


PREMIUM PIXELS 
emium Pirels est site de ressources en PSD créé par 
je remarquable. wabdesigner anglais Ormen Clark 
Depuis plusieurs années, il offre sur s0n site des 
ressources comme des boutons, des lormulaires, des 

menus, dans un style simple et actuel, Ses PSD sont remplis 

de petites astuces de conception très intéressante. Son 

travail, appliqué et calé au pixel près, est une grande source 

d'inspiration 

Du premiumpiels com 
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ULTIMATE CSS GRADIENT 
GENERATOR 


Itimate CSS Gradient Generator est un outil en ligne 

qui permet de créer des dégradés CSS à l'aide d'une 

interface ressemblant fortement à celle proposée 

par Photoshop, Intuitive, cette plate-forme permet 
de choisir les différentes couleurs que l'on souhaite utiliser 
dans notre dégradé, de modifier l'orientation ainsi que la 
taille. Si jamais vous êtes en manque d'idées, une palette 
de dégradés prédéfinis est disponible. Le code généré par 
cet outil est automatiquement préfixés afin de le rendre 
compatible avec un maximum de navigateurs. 
mwrcolorilla com/gradient-editor 


Uime CSS Grant Générateur 


SCREENFLY 
creenfiy est un outil simple, qui permet de vérifier 
son site en fonction de différentes talles d'écrans 
Après avoir inséré l'url de votre site à tester, 
Screenfly vous offre plusieurs choix d'écran 

desktop, tablette, mobile, télévision. Une fois la catégorie 
sélectionnée, il reste encore un nombre important de 
combinaisons possibles comme le choix de la taille de 
l'écran en pouces, le modèle de téléphone ou de tablette, 
son orientation. Une autre option permet de choisir une 
taille personnalisée et d'afficher ou non la scrollbar, Cet 
outil est une très bonne solution pour tester rapidement 
son site sur tous les types de supports. 

uw quiktook com/screenfiy 
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BALISES XHTML4 


(en italique, les balises devenus obsolètes en 2012) 


Enté Fonctionnalit 


<IDOCTYPE> Déclare le type de document web et sa version. Au choix: 
<IDOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 
Transitional//EN» «http://anevrar3.org/TR/xhtmls/DTD/ 
xhtmli-transitional.dtd=» DOCTYPE HTML PUBLIC 
=/WSC//DTD RTML 4.01//EN» «https//hnwvewg-org/ 
TR/htrmlé/strict.dtd»> (DOCTYPE HTML PUBLIC «-// 
W3C//DTD HTML 401 Transitional//EN» «http://www 
w3.0rg/TR/html4/loose.did»» 


<head> Bloc Création de l'entête de la page HTML. profile 
“dink> En ligne _ | Permet de renseigner un lien externe, comme par Type: href media 
exemple pour charger les pages CSS ou un fichier JS 
<body> Bloc Débute le corps de la page HTML. alink ; background ; bgeolor ; 
link ; onload ; onunlond ; text ; 
vlink; 
<div Bloc Définit un bloc générique ou conteneur pouvant recevoir [id ; class ;align ; datafld ; datasre 
= 
<span> Enligne | Permet d'apporter un style à une partie de contenu id ; class ; datafld ; datasre ; 
dataformatas 
<style> Bloc Définit un passage pour les feuilles de style css. media ; title ; type 
<abbr En ligne __| Définit une abréviation Title: lang 
<big> En ligne Augmente la taille de 
<blockquote» Bloc Met en forme une citation en créant une marge à gauche. | cite 
<dd> Bloc Crée un glossaire (encadré avec la balise <db). 
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* Balises XHTML 


cam» En ligne _ | Représente une définition de terme 
<a Bloc Encadre un glossaire (créer avec La balise <dds). 
<em> Enligne _ | Définit une unité de mesure de caractère, surtout 
employée dans les CSS 
Jon Définir jénéral ire 
<hpahé  |Blo Définit un titre avec des niveaux de taille de police align 
différent (4 = grand) 
& Enligne _ | Définit le texte en italique. 
ans Enligne _ | Représente un texte inséré dans une ligne 
di» Bloc Définit un élément de liste (encadré avec les balises «ul 
ou «ol»). 
cmarquee» défiler le n 
<nobr> Enligne _ | Empêche le saut de ligne. 
«ob Bloc Crée une liste numérotée (encadre la balise di) compact start; type 
> Bloc. Crée un nouveau paragraphe (saut de 2 lignes) align 
pre Bloc. Défiit un texte pré-formaté. width 
<q Enligne _| Pour une citation courte lang 
Es Enligne _| Barre le texte. 
small Réduit a till h . 
strong» Enligne _ | Mise en exergue d'un mot afin de lui donner 
de l'importance. 
sub> Enligne _ | Définit le texte en indice. 
sup> Enligne _| Définitle texte en exposant 
æ Enligne _ | Définit un texte de type machine à écrire. 
eu Souligre le texte 
eur Bloc Crée une liste classique (encadre la balise <i>) 
Liens 
<> Enligne _ | Définit un lien hypertexte ou une ancre. href name ; target shape ; 
coords ; accesskey : re 
Images 
<img» Enligne _ | Permet d'insérer une image (avec l'attribut « arc ») align al; border ; height 
hspace ; ismap ;longdene ; name ; 
re; usemap ; vspace ; width 
maps Bloc Défiit une zone map (carte image). id ; class ; datald ; datasre ; 
dataformatas 
<area> Enligne _ | Permet de choisir le type de zone map, d'en définirses | shape ;coords; href 
coordonnées ainsi que d'effectuer un hyperlien. 
<table> Bloc Crée un tableau. border ; cellpaddin 
cellspacing : cols; height: width 
<colgroup>  |Enligne _|Définit les propriétés d'un groupe de colonnes. align ; span ; valign width 
<cob Enligne _ | Défnit la propriété d'une colonne. align; span  valign ; width 
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<tbody> Bloc Détermine le corps du tableau (encadré parla balise [align:valign 
<table»). 
> Bloc Crée une ligne dans le corps du tableau align : background; bgcolor; 
bordercolor; valign 
a& Bloc Crée une cellule dans la ligne du corps du tableou align ; background ; bgcolor ; 
bordercolor; colspan ; 
height rowspan ; width 
<thead> lee. Définit l'en-tête d'un tableau align : valign 
<> Bloc Crée la cellule d'en-tête d'un tableau align ; bgcoler ;colspan ; height; 
nowrap ;rowspan ; width 
<tioot> Bloc Définit un ensemble de ligne comme pied dutableau | align: valign 
<caption» En ligne | Définit le titre ou légende d'un tableau. align 
“<frameset> Divise la page HTML 
<frame> Définir 
rames Définit un codre à l'intérieur dela page HTM align : frameborder: height; 
marginwidth; marginhelght; 
name  scrolling are width 
<noframe Définir une zone HTM 7 ur ne prend 
pas en compte les frames 
Formulaire 
<form> Bloc Défnit un formulaire. action ; accept ; accept-charset ; 
“enctype ; method ; name ; 
enreset ; onsubmit; target 
“select Enligne _ | Crée un menu ou une liste déroulante. datafd; datasre ; dataformatas ; 
disabled ; mul 
onblur ; onchang 
site ; tabindex 
<input En ligne | Crée divers éléments (champ de saisie, champ pour accept; accesskey ;align ;alt; 
fichier à transmettre, bouton envoie ou d'interruption, | checked ; datafd ; datasre ; 
bouton radio, case à cocher, élément caché) dataformatas ; disables 
maxlength ; name ; onblur ; 
enchange ; onfoeus ; readonly : 
size ;readonly :tabindex; type ; 
<iabeb En ligne _| Assigne un texte à un champ de formulaire. accesskey; for; onblur ; onfoeus 
<option En ligne _| Élément de liste déroulante «select» 
étextarea» En ligne _ | Crée une fenêtre de saisie. name ; rows; cols 
<heldsets Crée une zone qui regroupe plusieurs éléments de color; face ; size 
formulaire sous forme de cadre. 
legend» En ligne _| Crée une légende sur le contour du cadre <feldset» align ; accesskey : 
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* Balises XHTML 


tabindex ; value 

<applet> Insère une applet java. align ; alt ; archive ; code 
height ; hspace ; name ; vspace ; 
width 

<embed> Insère une animation Flash. pluginspace ; classid ; height ; 

<object» Enligne | Insère un objet multimédia. align ; border ; classid ; 
codebase ; codetype ; data ; 
datafld ; datasre ; dataformatas 
declare ; height ; hspace ; name ; 
standby ; tabindex ; type ; 
& 

navigateur web ne gère pas le script inc 

«center» Enligne | Centre un élément. border ; cellpadding ; 
cellspacing ; cols ; height ; width 

<hn Bloc Insère une barre horizontale. border ; cellpadding ; 
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PROPRIÉTÉS CSS2 


Polices Valeurs Description 

font-family famille de police déclaration de police (doit être présente 
ur Le poste client) 

Font-style normal italie, oblique sole 

ont weight lighter, normal, bold 


ou valeur numérique 


graisse de La fonte 


font-sie Valeur numérique préférable en points | taille de la police 
pt}. em, x, pixel ou em 

fontvariant normal, small-caps. variante (petites majuscules) 

font font : Verdana, Arial, bold italic 8px ; [forme courte 

color “ahexadécimal» ou couleur web couleur du texte 

Tine-helght Valeur en pt, px em interlignage 

textalign. left, center, right ou justify alignement texte 

textindent Valeur en pt, px, em retrait texte 


text decoration 


A éviter 


défini une décoration 


textshadow 


Valeur en pt, px. em: 


ombrage texte 


texttransform 


Luppercaselowerense ou capitalize 


casse du texte 


background-color 


white-space normal, nowrap césure 

Word-spacing Valeur en pt, pr, em espacement des mots 

width En points (pt), pouces (in), enem,en | définit la longueur d'un élément de texte 
pixels (px), où en x où d'une image 

height En points (pt), pouces (in), encm,en | définit Ia hauteur d'un élément de texte 


pixels (px). ou en » 


mshexadécimals ou couleur web 


où d'une image 


couleur d'arrière-plan 


backgroundrimage 


un(e ur) 


image d'arrière-plan 


background-repeat 


repeat, repeat-x, 


repeat y.no-repeat 


répétition arrière-plan 


background: attachment 


scroll, fixed 


scrollsble 


background-position 


top: middle, bottom, left, center ou right 


position de l'image 


background 


margin [top -lef - bottom -right] 


background : url jpg) Exod ; 


En points (pt), pouces (in), en er, en 
pixels (px). ou en % 


forme courte 


marge externe 


margin 


Main: x 6 20 


forme courte 


Padding [top -left - bottom right] 


En points (pt), pouces (in), en em, en 
pixels (px), ou en x 


marge interne 


padding 


border(-top -left - bottom -right}-width 


padding ex 2e xx xx 


En points (pt), pouces (in), en em,en 
pixels (px). ou en x 


forme courte 


bordure 


border 


border : x x x xx dotted green, 


forme courte 


border-collapse 


separate ou collapse 
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« Propriétés CS52/0563 


fusion bordures 


des cellules 


border-spacing, 


border-spacing : 4pa: 


espacement cellules 


caption-side top bottom, left ou right positionnement 
légende tableau 

empty-cells show ou callapse affichage 

cellules vides 

table-ayout fixed ou auto largeur fixe ou variable 


speakcheaders 


comportement lors 


de la lecture des cellules 


liststyle-type 


decimal, upper-roman, lower- latin, dise, 
circle, square ou none 


type de puces 


et de numérotation 


Tiststyle-image 


ist-style-image : url (image:png) à 


personnaliser les puces avec une image 


Tiststyle- position 


inside ou outside 


puces ou pas 


Tiststyle forme courte 

@page Sage (size: portrait) mise en page de l'impre 
she auto, landscape ou port format l'impression 
margin-top margin-top : 3 em marge supérieure 
margin-right margin-right : 1,5 em marge de droite 


margin-bottom 


marginrright : 1 em 3 


marge inférieure 


margin-left 


margin-left:2 em 


marge de gauche 


marks 


crop (rats de coupe), cross (père de 
montage). none (pas de marque) 


traits de coupe et repères de montage 


page-breakbefore Always, avoid force le saut de page avant un élément 
page-breakcafter Always, avoid force le saut de page après un élément 
orphans orphans:2; évite les lignes orphelines en fin de page 
Widows widows +1: évite les lignes veuves en début de page 
@font-face font family: web Font 


border-"-"-radius: 


“dongeur pixeb ou 6%» dongeur pixel 


coins arrondis 


border-top-eft-radius opx coin supérieur gauche 

border-top-rightradius 10px 50% coin supérieur droit 

border bottom left radius 50% coin inférieur gauche 

border-bottom-right-radius 10px 20px coin inférieur droit 

box-shadow 10px 20px 4px #CCC ombrage, avec taille et couleur définie, 
tn ou en dégradé 

textshadow SpxSpx 2px 2BBB ombrage texte interne ou externe, avec 


aille et couleur définie, uni ou en dégradé 
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background-image 


uri(backgrdoz.png), url(backgrdo2.pag) 


backgrounds multiples 


Color réglage opacité teinte 

ROBA colors F9ba(0,0,255,0.5) RGBa : Red, Green, Blue, Alpha channel 
pour Rouge, Vert Bleu, Opacité 

HSLA colors hsla(0100%,50%,0.4} HSLa: Hue, Saturation, Brightness, 
Alpha channel pour Teinte, Saturation, 
Luminosité et Opacité 

wordwvrap normal ou break-word. césure 

resize: horizontal, vertical ou both autorisation redimensionnement par 
utilisateur 

©media media screen and adaptation de La page en fonction de la 
largeur disponible 

column multircolonnage 


column-count 


nombre de colonnes 


columwidth 


largeur d'une colonne 


column-gap 


espace inter-colonnes 


Nouveaux sélecteurs d'attributs 


Combinateur d'adjacence direct 


aélecteurt-sélecteur 2 


fattrib]* trs] permet d'atteindre un élément Html 
dont attribut (nom de classe ou d'ID) 
commence par une valeur texte 

Ettb}s Lattrss oo] permet d'atteindre un élément Html dont 
l'ttribut finit par une valeur texte 

ETS map] permet d'atteindre un élément Html dont 


l'attribut comporte l'occurrence par une 
valeur texte 


sélection d'un élément suivant un autre 


Nouvelles Pseudo-classes 
nth-childO 


ex div-img 


even , odd, argument position 


ciblage d'un élément en fonction de sa 
position 


nth-last-chil) 


permet d'atteindre le dernier élément 
enfant d'un élément 


Les transitions 
Imoteur)-transition-property 


propriété choisie pour la transition. 


Tast-child identique à nth-last-child(s) 

th-childp) permet d'atieindre le premier élément 
‘enfant d'un élément 

Frstchiid identique à nth-child(s) 

empty empsy permet d'atteindre les éléments n'ayant 
pas d'enfants. 

checked Fchecked permet d'atteindre les éléments d'un 
formulaire déjà coché 

not not (expression) permet de sélectionner les éléments 


qui n'ont pas l'expression dans leurs 
paramètres (nom de classe ou ID par 
exemple) 


Imoteur]-transition-duration 


Durée transition 


Imoteur]-transition-timing-function 


Function appliquée 


‘AIESA 
SÎIES4 Un, 


Graphisme 
Conduite ae projet 
Stratégie digitale. 


JESAï multimédia info@iesamultimedia.com 
5, rue Saint Augustin - 750 
01 % 86 57 06 


Ressources 


Des livres et des vidéos 
pour se former 


La rédaction a sélectionné quelques-uns des meilleurs livres et DVD afin que les mots HTML 
et CSS n'aient plus de secrets pour vous ! 


LIVRES 


Auteur Éditeur 
Ésteur 
Prin 1990 € 


VIDÉOS 


MEDIAFORMA.COM 
HTMLS/CSS3 


Auteurs 8 Auteurs 
Este Éditeur 
Pr Pn 


HTML5 


etCSs3 | À Ï M L 


ELEPHORM.COM 
APPRENDRE L'UX DESIGN 


VIDEO2BeaIN COM 
RESPONSIVE WEB DESIGN 


re “4 AVEC HTMLS ET CSS3 
L'UX DESIEN : 


Ressources 


Un terme inconnu, envie d'en savoir plus sur les abréviations et autres technologies ? 
Voici les explications des termes que vous rencontrerez forcément à la lecture 
de ce magazine ou d'une fiche technique... 


Affiliation 
Partenariat etre un éditeur de ie et un se 
commercial cherchant à développer se ventes en 
line ou à Eaptr des prospects. 


API (Application Program Interface) 

Linterace d'application défini comment. 

une application communique avec une autre. 
GoogleMap Gratuite), out 

va exploiter certaines données 

de votre lte.Les AP ont trois avantages 

Le développement à déjà eu lieu, objet est 

standardisé et este plus souvent gratuit. 


Attribut 
permet d'ajouter un comportement une 
balise. Pr exemple, <br/> pour revenir à a igne 
ou <hn/> pour tracer une ane horizontal, 


Balise 

Elle permet de délimiter les éléments de a page 
></p> 

* Baise ouvrant balise débutant un élément, 

ex. <p> 

* Bat 1 fermant un élément, ex. </p>. 


* Superbalise: une seule balise pour délimiter 
un élément, x, <bn/>. 

+ Div: crée des bites dns lesquelles se 
trouvent les baies 


Bruit 
{Une page Web “soufre du bruit quand 

ll contient trop d'infermations et de 
fonctionnaltés qui uisent à a compréhension 
du message. 


Canvas 
(Composant de HTML: qui permet d'effectuer 
des rendus dynamiques d'images luna 

ia des scripts. Implémenté dans certains 
raviateurs fait partie de spécification 


pourle-commerc) sont les plus coms. 


Compilateur “.less CSS" 
AAppliation avait qui permet étre des, 
(CSS de manière acelérée. 


(Quand un débutant a compris comment écrire un 
CSS peut utiliser le compteur 


css 
Cascading Style Sheet, itéralement “foules 
de styles en cascade”, est un standard 
rraphique, un langage qui permet habiller 
et de metre en page un sie. 


Dreamweaver 
Éditeur de sites Web de type WYSIWYG 


DRM (Digital Rights Management). 
La Gestion numérique des droits d'auteur est 


licence pour ire ce contenu. 


Entrées 
(Obets (tetes ou images) annonçant un 
contenu et sur lesquels l'internaute peut 
que. 


Feuille de styles 
Les balises" HTML permettent de metre 
en page, de "définir style" Sun tente. 
À ce stade, La mise à jour du site est 


Fichier graphique 
Formats que es navigateurs reconnaissent sans 
souci. 

GIF (Graphic interchange Format) a la 
particularité de posséder plusieurs fichiers en 
un, afrant als une animation, mais 'utiise 
que 256 couleurs. 

PNG (Portable Network Graphics) gère a 
transparence et garde La qualité des couleurs 
malgré sa compression. 

+ IPEG Ucint Photographic Erperts Grous) 
este plus récent. Sa compression st opimae. 


Fireworks 
Logiciel d'Adobe très intuitif qu vous permet de 
centrer vo éléments facilement et qui possède 
énormément de fonchiomatés das création 
saphique. 


Flash 
Logiciel d'animation d'Adobe utilisé pour réaliser 
des animations. Elles sont suffisamment légères 
poux tre transmises en ge. 


Footer (pied de page) 

Cette barre horizontale en bas de page permet 
de trouver des entrées souvent non prioritaires 
comme le contact Webmaster, les mentions. 
Juridiques le plan du ste, La signature 

de 'etreprise, te. 


Gabarits 
Ces documents wirerames en anglais, 
permettent de structurer es futures pages 
hu sie. ls aident à définie dans le détail eur 
oransation spatiale. 


GIMP 
(Ce programme de traitement d'images presque 
aussi riche que Photoshop au niveau des 
onctionnalés, est gratuit Les pros préfèrent 
“cependant Photoshop" et strtor. 


Graphic Converter 
‘Bon marché etai d'emploi, ce petit logiciel 
PC et Mac permet de gérer es images 
destinées au Web. À déconseille cependant 
Là préparation de l'image requiert des calques 
destetes, etc. 


tag 
(Cemot clé précédé un #, permet ajouter 
des métadonnées ou tee (message sur wie) 
{uneinormation complémentaire qui pret de 
reroupe les messages autour d'un même thème, 
un même leu ou dun même événement 


Header (en-tête) 
Zone horizontale en haut des pages du ie. 
El accueil de lus en plus le logo et la 
vocation de l'institution, une signalétique 

de retour vers La page d'accueil et 
éventuellement le moteur de recherche interne. 


HTML 
Langage de base des pages Web. 


HTMLS 
Successeur révolutionnaire de HTML. 


Layout 
Mise en page d'un site Web. 


Javascript 
Langage de programmation de scripts utilisé 
dans les pages Web interactives. 


Illustrator 
Logiciel e création graphique vectorielle. 


populaire, st concurrencée par Prototype, Sri. 
aculous,Dojs ou encore Moo Tools. 


Mise en page liquide 
Elle caractérise une page HTML dont la largeur 
s'adapte automatiquement à tale de écran. 


Mise en page fixe 
Elle afche une page HTML de a même manière 


page en plusieurs parties. En principe, l'un des 
cadres contient La barre de navation dust. 


Mock-up. 

Maquette présentée sur papier où à l'écran. 

Ce terme, ss du graphisme publicitaire, 
pro 


après l'étape des gabarits, avant coll des 
maquettes HTML. 


Netvibes 
Portal français agrèe le contenu d'un site 
en provenance d'autres sites. permet de 
centraliser des informations en temps réel 
sur une seule page Web. 


hotoshop 
Logiciel de retouche detratement et de dessin 
sisté par ordinateur été par Adobe. 


PHP 
Hnventé pour garder ls traces des personnes. 
qui venaient consulter un CV sur Internet, 


Au né Le “cr” est un scénario qui 
détail Forgansation d'un Him Enintommatique, 
est un langage d'enchainement des avaux "Le 
“langage de programmation" est enécuté 

partir de fiers contenant le code source 

da programme qu ser interprété. 


Site statique 
{Un site est dt statique lorsqu'il est pas 
Grmamique. 


Site dynamique 

{Un ste est dt dynamique quand doit 
notamment stocker des données transmises 
par linternaute par exemple une inscription. 


Ressources 
Ligue 


une page courrier des lecteurs, une page galerie 
d'images, une page de hens peuvent sure à 
ur site contenant virtuellement ina ml pages. 


‘Trackback 
Système de lien permettant aux internautes 
de retrouver, à partir un blog, autres bilets 
ritant du même jet, où qu soient sure 
Tole 


Typos 
(CMS open source très répandu dans le monde 
francophone. 


ui 
Abréition de user interface, Htéralement 
inmterace utilisateur, 


URL 
Adresse Web d'une page où d'un ie. 


Widget 
Ce terme vient de La contraction de deux mots 
window Clenétre) ei de gadget. 1 peut désigner 
soh un élément visuel d'une interlce graphique 
bouton ascenseur. ste déroulante. ok un 

pet out qui permet obtenir des informations 
Cmétéa actualté carte routière traducteur.) 


WordPress 
Pistelorme de création de blogs, qui permet 
également de gérer des ses ob. 


Worklow 
(On l'appelle ausi en français “Petit Poucet" 
ou encore“ fAviane”. Ce petit chemin 
montre à l'internaute es pages par lesquelles 
est passé, sous a forme: Home> rubrique > 
pagey. 


WYSIWYG 
“Mt you se is what you ge”, ttéralement 
ce que vous voyez est ce que vous oblenez 
{Unogicil WYSIWYG permet de composer 
visuellement une page Web sans devoir créer 
debalses. 


Sur le CD 


s offe @ fotolia 


Fotolia le leader européen de l'image libre de droits, vous offre chaque mois vingt images de sa collection. Ces images 
peuvent être utilisées de manière professionnelle conformément au contrat de licence standard disponible sur le site 
Fotolia à la page: ttp://frfotolia.com/Info/Agreements. La collection Fotolia comprend près de douze millions d'images, 
de vecteurs et de vidéos proposés à partir de 1 euro pour une utilisation professionnelle. Les images Fotolia peuvent être 
utilisées commercialement conformément à la licence d'utilisation standard disponible à l'adresse : 
httpi//fr.fotolia.com/Contract/View/XS. 


Sur le CD 


LEE #7 Les fichiers d'exercice 


Retrouvez certains des éléments qui vous aideront à réaliser 
les tutoriels de ce magazine. 


Découvrez en vidéo les principaux 
sujets qu'un designer web doit 
connaître. Adoptez les bonnes 
pratiques à appliquer en matière 
d'UX design. 


TE 


HTMLS 


Plus de 100 pages delivres! 
Extraits choisis 


+ Dans HTMLS & CSS3 (Pearson), Michel Martin propose une boîte à outils 
indispensable pour employer HTMLS et CSS3, 

* Dans Introduction à HTMLS, 2ed (Pearson), les développeurs Bruce Lawson 

et Remy Sharp se concentrent sur la pratique et la réalité du terrain. HT 

+ Dans Les Clés du référencement sur le web (BOD), Régis Michel L 


et Pascal Albericci montrent comment rendre visible une boutique en ligne. 
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Alexey Samsonov pour Fotolia 


10 MOIS « 10 PSD 
sd Loto soie 


vous invite 
par l'un des 


lleurs 


Le mereredi 10 juillet, téléchargez gratuitement et durant 24H, la composition «lsland*» 


de l'artiste russe Alexey Samsonov. Découvrez également le making-of de sa création. 
www.fotolia.fr/ten | D fotolia 


Tél. 0970 465 265 
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